将鼠标悬停在带有 uib-tab 的选项卡上时显示工具提示？

Question

我遇到了 HTML/Bootstrap 问题。我有一组选项卡，我使用 Angular Bootstrap (UI Bootstrap) 上的 uib-tabset 指令显示。如果选项卡被禁用，我想显示一个在将鼠标悬停在选项卡上时显示的工具提示。任何人都知道如何做到这一点？这是 HTML（我不太确定还能放什么，这很简单）：

<uib-tab disable="isBracketdisabled">
    <uib-tab-heading>
      I AM A HEADING
    </uib-tab-heading> 
</uib-tab>

如果有人能提供帮助，我将不胜感激。谢谢！

Answer 1

只需使用tooltip-enable 选项将uib-tooltip 指令应用于您的选项卡，以便仅在满足您的条件时显示工具提示：

<uib-tab uib-tooltip="text" tooltip-enable="isBracketdisabled" 
    tooltip-class="customClass" disable="isBracketdisabled">

关于您的评论，您可以通过使用 tooltip-class 属性并传入自定义类来应用自定义样式。然后，您可以根据自己的喜好在 css 中设置样式：

.tooltip.customClass {
    z-index: 1000
}