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

Question

I'm having an HTML/Bootstrap issue. I have a group of tabs that I display using the uib-tabset directive on Angular Bootstrap (UI Bootstrap). I want to display a tooltip that displays when hovering over the tab if the tab is disabled. Anyone have an idea how to do this? Here is the HTML (I'm not really sure what else to put, it's pretty simple):

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

If anyone could help I'd be very thankful. Thanks!

Answer 1

Simply apply the uib-tooltip directive to your tab using the tooltip-enable option to only display the tooltip when your condition is met:

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

In regards to your comment, you can apply custom styling by using the tooltip-class attribute and passing in a custom class. You can then style it to your liking in your css:

.tooltip.customClass {
    z-index: 1000
}