CODEWITHSUNDEEP
javascripthtmlcssangularjstwitter-bootstrap
amacdonald
amacdonald

Reputation: 157

Displaying a tooltip when hovering over a tab with uib-tab?

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!

Upvotes: 0

Views: 1609

Answers (1)

David L
David L

Reputation: 33873

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
}

Upvotes: 3

Related Questions