Zurb Foundation Tooltip background opacity issue

Question

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;
}

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

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

have you tried !important on the css rules? .has-tip { border-bottom: 0; z-index: 9999 !important; opacity: 1; } — Alegrowin, Mar 17 '16 at 14:58
I tried to reproduce the issue here..https://jsfiddle.net/4gLb8djb/ Tooltip is over other stuff.. can you update this fiddle so I may help you more! — Alegrowin, Mar 17 '16 at 15:21
Thanks Alegrowin. Strange the tooltip in the jsfiddle doesn't look like the one used in Foundation. i don't know why it looks and behave different then the one i use. i didn't modify anything beside the .has-tip class. — StandardNerd, Mar 17 '16 at 15:40

Alegrowin · Accepted Answer · 2016-03-17T16:33:50.457

2

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/

edited Mar 17 '16 at 16:33

answered Mar 17 '16 at 15:57

Alegrowin

321
1
14

Thanks again Algrowin for your effort. The removing of z-index doesn't have any effect. You can look at https://fadendaten.herokuapp.com/looks to see my tooltip-issue live. – StandardNerd Mar 17 '16 at 16:04
1

.tooltip { z-index: 10000; } currently it is 10 – Alegrowin Mar 17 '16 at 16:33

Zurb Foundation Tooltip background opacity issue

1 Answers1