Question

I manage the website for a small college library and am trying to create a bubble tooltip for an images that are part of a slider. Here’s the link to the page to show you what I mean:

http://library.sfc.edu/webvoy3.htm. If you hover over the first image in the slider, you will see the tooltip stuck in there. There’s no JavaScript for this tooltip, only CSS. I got the code from http://trentrichardson.com/examples/csstooltips/.

This is the CSS part of the tooltip:

a.tt{
  position:relative;
  z-index:24;
  color:#3CA3FF;
  font-weight:bold;
  text-decoration:none;
}

a.tt span{ display: none; }

a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
  display:block;
  position:absolute;

  top:0px; left:0;
  padding: 15px 0 0 0;
  width:200px;
  color: #993300;

  text-align: center;
  filter: alpha(opacity:90);
  KHTMLOpacity: 0.90;
  MozOpacity: 0.90;
  opacity: 0.90;
}

a.tt:hover span.top{
  display: block;
  padding: 30px 8px 0;
  background: url(images/bubble.gif) no-repeat top;
  margin-top: 20px;
}

a.tt:hover span.middle{ /* different middle bg for stretch */
  display: block;
  padding: 0 8px;
  background: url(images/bubble_filler.gif) repeat bottom;
}

a.tt:hover span.bottom{
  display: block;
  padding:3px 8px 10px;
  color: #548912;
  background: url(images/bubble.gif) no-repeat bottom;
}

This is the CSS of the SLIDER

#slider {
  width: 450px;
  position: relative;
  height:inherit;
  float:left;
  padding-right:45px;
  margin-left: 8px;
}

#slider .buttons span {
  display: block;
  width: 38px;
  height: 38px;
  font-size: 0;
  line-height: 0;
  text-indent: -4000px;
  cursor: pointer;
}

#slider .buttons span {
  position: absolute;
  top: 32px;
}

#slider .buttons .prev {
  left: -5px;
  background: url(images/button-prev.gif) no-repeat 0 0;
}

#slider .buttons .next {
  right: 16px;
  background: url(images/button-next.gif) no-repeat 0 0;
}

#slider .holder {
  width: 400px;
  height: 110px;
  position: relative;
  overflow: hidden;
  left:40px;
  margin-right: 5px;
  padding-right: 0px;
  padding-top: 9px;
  background: url(images/back-slider.jpg) no-repeat 0 0;
}

#slider .content ul {
  position:relative;
  list-style-type:;
  height:112px;
  width: 450px;
  overflow:hidden;
  padding-right: 10px;
  padding-top: 5px;
}

#slider .content ul li {
  float: left;
  display: inline;
  list-style-type: none;
  margin-left: 16px;
  height:133px;
  overflow:hidden;
  width:80px;
}

#slider .content ul li a {
  display:block;
  width: 74px;
  height: 97px;
  padding-left: 3px;
  padding-top: 4px;
  background: url(images/slider-fragment.gif);
}

AND THIS IS THE HTML CODE

<div id="slider">
  <div class="buttons">
    <span class="prev">prev</span>
    <span class="next">next</span>
  </div>

  <div class="holder">
    <div class="content">
      <ul>
        <li>
          <a href="http://library.sfc.edu:7008/vwebv/holdingsInfo?bibId=261454" class="tt">
            <img src="css/css-eb/images/covers/cover1.png" />
            <span class="tooltip">
              <span class="top"></span>
              <span class="middle">This is my Bubble Tooltip with CSS</span>
              <span class="bottom"></span>
            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

The problem seems to be the incompatibility the tooltip’s CSS with the slider’s CSS.
Any suggestion or advice would be greatly appreciated.

Answer 1

Just remove overflow: hidden from #slider .content ul li – works for me when I do this live via Developer Tools.