Zurb Foundation Tooltip背景不透明度问题

Question

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

我尝试添加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;
}

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

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

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/