Angular Bootstrap - tooltip not showing

Question

I have a simple form that is inside the tabs of Angular UI Bootstrap. Form controls have tooltips associated with them to show errors. I am using a custom event that will toggle the visibility of the tooltip.

The idea is for the tooltip to appear in the required fields.

With UI-Bootstrap version 1.3.2 and Angular 1.4.8, everything works fine, but since I upgraded to Angular 1.5.3, the tooltip no longer displays. It will show as soon as I find something in the text box and delete it, which makes me believe that now it is required that the model be initialized.

I have two plows that will accurately show what is happening:

Work bar (since Angular 1.4.8) - https://plnkr.co/edit/IkuOdCrcFJ8lBeNA5sSh

<data-uib-tabset> <data-uib-tab> <data-uib-tab-heading>Tab 1</data-uib-tab-heading> <form name="testform"> <input type="text" name="test" id="test" data-ng-model="test" data-ng-required="1" data-tooltip-append-to-body="true" data-tooltip-placement="right" data-uib-tooltip="Required!" data-tooltip-trigger="none" data-tooltip-is-open="testform.test.$error.required" /> </form> </data-uib-tab> <data-uib-tab> <data-uib-tab-heading>Tab 2</data-uib-tab-heading> Content 2 </data-uib-tab> </data-uib-tabset> 

Plunk doesn’t work (with Angular 1.5.3) - https://plnkr.co/edit/Wl3Bq13FKPnqW7RqwfiJ

Answer 1

I noticed, as mentioned in the comments, that there is a class attached - uib-position-measure . It has 3 styles that cause the problem:

• top: -9999px !important
• left: -9999px !important
• visibility: hidden !important

EDIT . I am reorganizing my post now that I have delved deeply into this. I still don't think I have a great solution, but at least there is information and options.

Solution 1

Just remove the criminal class uib-position-measure with javascript and then set the top and left styles to .tooltip .

Plunker

 window.onload = function() { var tooltip = document.getElementsByClassName('tooltip')[0]; tooltip.className = tooltip.className.replace(/\buib-position-measure\b/,''); } .tooltip { top: 42px; left: 150px; } 

Decision 2

Overwrite the style causing the problem with javascript.

Plunker

 <script type="text/javascript"> window.onload = function() { var tooltip = document.getElementsByClassName('tooltip')[0]; tooltip.setAttribute("style", "visibility: visible !important; top: 42px !important; left: 150px !important;"); } </script> 

Decision 3

I managed to find where the .uib-position-measure class is created in the ui-bootstrap.js file. I removed !important from visibility, top and left. After that, I was able to fix the problem with css in the .tooltip class.

Plunker

ui-bootstrap.js is the file I created, copied the original and changed the uib-position-measure class - it is located at the bottom of line 7327.

In style.css I just added the following:

 .tooltip { visibility: visible; top: 42px; left: 150px; } 

Linked Issue

I also managed to find a problem with GitHub related to this - https://github.com/angular-ui/bootstrap/pull/5530

Someone removed some inline styles and added them as a class so that they could be rewritten with CSS instead of using javascript. This might be the best way to handle this - https://github.com/angular-ui/bootstrap/pull/5530/commits/44643775dece535b3ffa62d7edae86eaa12ac154 . The problem is finding the location of the inline uib-position-measure style and handling it in the same way.