CODEWITHSUNDEEP
twitter-bootstrap-3
Vadorequest
Vadorequest

Reputation: 17997

Bootstrap tooltip 3.2 - Styling broken with aria-describedby

I don't understand why my bootstrap tooltip doesn't work correctly. The issue is not the initialization, because it reacts correctly, the issue is about the styling. There is not styling, no black box, just a white text at the bottom left (whatever placement I try to apply).

Here is the generated code when the cursor in on top of the element:

<button id="test" type="button" class="btn_primary" title="" aria-describedby="ui-tooltip-5">Tooltip on left</button>
<div id="ui-tooltip-3" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" style="position: relative; top: -5px; left: 0px; display: block;"><div class="ui-tooltip-content">Tooltip on left</div></div>

I compared with this fiddle: http://jsfiddle.net/52VtD/31/

The generated code is completely different and not at the same place. On the fiddle everything is generated at the same place and once an element has been initialized it gets the data-original-title, that I don't have. And the <div id="ui-tooltip-3"..> is generated just before the end of the body tag, not at the same place.

I load bootstrap using LESS. I didn't find other odd behavior yet. I tried to load bootstrap from CDN after (and without) loading it from my generated less=>css file, but same issue.

I also tried while not loading all my own CSS but only bootstrap/font-awesome. Same.

Any idea why this is happening?

Upvotes: 3

Views: 3894

Answers (1)

Vadorequest
Vadorequest

Reputation: 17997

The issue was a compatibility issue between Bootstrap 3 and Jquery UI, both used the tooltip element. My solution was to not take the JQuery UI Tooltip addon. (When you can customize what plugin you wanna add to jQuery UI before to download it)

Upvotes: 8

Related Questions