Zurb Foundation 工具提示背景不透明度问题

Question

我使用 Foundation 6 和工具提示功能。

我尝试添加 z-index: 9999; opacity:1 到我的工具提示 class 但没有任何效果。

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

一切正常，除了背景文本在工具提示上可见。

如何强制工具提示背景覆盖背景文本？

Answer 1

我更新了 JSFiddle https://jsfiddle.net/4gLb8djb/8/

只需删除 has.tip 元素上的 z-index

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

如果它不起作用，可能是不透明度有问题： http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Zurb Foundation 工具提示背景不透明度问题

Zurb Foundation Tooltip background opacity issue

html

css

zurb-foundation