CODEWITHSUNDEEP
htmlcsszurb-foundation
StandardNerd
StandardNerd

Reputation: 4183

Zurb Foundation Tooltip background opacity issue

I use Foundation 6 and the tooltip feature.

I tried to add z-index: 9999; and opacity:1 to my tooltip class but without any effect.

        <ul class="icons">
          <li >
            <a href="#" class="size thumbnail">XS</a>
          </li>
          <li data-tooltip aria-haspopup="true" class="has-tip top" data-disable-hover="t" title="Nicht verfügbar">
            <a href="#" class="size-not thumbnail">S</a>
          </li>
          <li data-tooltip aria-haspopup="true" class="has-tip top" data-disable-hover="false" title="Nicht verfügbar">
            <a href="#" class="size-not thumbnail">M</a>
          </li>
          <li class="selected">
            <a href="#" class="size thumbnail">L</a>
          </li>
          <li >
            <a href="#" class="size thumbnail">XL</a>
          </li>
        </ul>

and the belonging css:

.has-tip {
  border-bottom: 0;
  z-index: 9999;
  opacity: 1;
}

enter image description here

Everything works as it should except the background text is visible over the tooltip.

enter image description here

How can i force the tooltip-background to cover the background-text?

Upvotes: 1

Views: 264

Answers (1)

Alegrowin
Alegrowin

Reputation: 331

I've update the JSFiddle https://jsfiddle.net/4gLb8djb/8/

Just remove the z-index on has.tip element

.has-tip {
  border-bottom: 0;
  opacity: 1;
}
.tooltip {
  z-index: 10000;
}

If it's not working maybe there is an issue with the opacity: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Upvotes: 2

Related Questions