Angular Bootstrap - Tooltip not showing

Question

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

The idea is to have tooltip visible on required fields.

With UI-Bootstrap version 1.3.2 and Angular 1.4.8 everything is working fine but since I upgraded to Angular 1.5.3 tooltip is not showing anymore. It will show once I actually type something in the text field and delete it which makes me believe that now requires the model to be initialized.

I have here two plunks that will show exactly what is going on:

Working plunk (with 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>

Not so working plunk (with angular 1.5.3) - https://plnkr.co/edit/Wl3Bq13FKPnqW7RqwfiJ

Answer 1

I noticed as mentioned in the comments that there is a class being attached - uib-position-measure. It has 3 styles that are causing the issue:

1. top: -9999px !important
2. left: -9999px !important
3. visibility: hidden !important

EDIT - I'm reorganizing my post now that I've dug pretty deep into this. Still don't think I have a great solution, but at least have some info and options.

Solution 1

Simply remove the culprit class uib-position-measure with javascript and then adjust the top and left styles on .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;
}

Solution 2

Overwrite the styling that is causing the issue 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>

Solution 3

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

Plunker

ui-bootstrap.js is the file I created, copied the original over, and modified the uib-position-measure class - it is at the bottom on line 7327.

In style.css I simply added the below:

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

Related Issue

I was also able to find an issue on 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 overwritten by CSS instead of using javascript. This may be the best way to handle it - https://github.com/angular-ui/bootstrap/pull/5530/commits/44643775dece535b3ffa62d7edae86eaa12ac154. The problem is finding the location of the uib-position-measure inline styling and handling it the same way.