Zurb Foundation Tooltip背景不透明問題

我使用Foundation 6和工具提示功能。Zurb Foundation Tooltip背景不透明問題

我試着添加z-index：9999;和不透明度：1到我的工具提示類，但沒有任何影響。

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

和屬於CSS：

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

一切正常，因爲它應該除了背景文字是在提示可見。

我怎麼能強制提示背景覆蓋的背景文字？

來源

2016-03-17 StandardNerd

你試過了！對css規則很重要嗎？ .has-tip { border-bottom：0; z-index：9999！重要; 不透明度：1; } – Alegrowin

是的，但它沒有任何影響... – StandardNerd

我試圖重現這裏的問題..https：//jsfiddle.net/4gLb8djb/ 工具提示是其他東西..你可以更新這個小提琴我可以幫助你更多！ – Alegrowin

我已經更新的jsfiddle https://jsfiddle.net/4gLb8djb/8/

只是刪除has.tip元素

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

上的z-index如果它不工作，也許有一個與不透明的問題： http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

來源

2016-03-17 15:57:40 Alegrowin

再次感謝Algrowin爲您付出的努力。去除z-index沒有任何影響。您可以查看https://fadendaten.herokuapp.com/looks，查看我的工具提示問題。 – StandardNerd

.tooltip z-index：10000; } 目前它是10 – Alegrowin

真棒，謝謝Alegrowin！ – StandardNerd

Zurb Foundation Tooltip背景不透明問題

回答

相關問題