Clever Geek Handbook

Bootstrap 3.2 Tooltip - Styling with a broken aria

I don't understand why my bootstrap hint is not working correctly. The problem is not initialization because it reacts correctly, the problem is style. No style, no black box, just white text in the bottom left corner (no matter what placement

I try to apply).

Here is the generated code when the cursor is over an 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 this fiddle: http://jsfiddle.net/52VtD/31/

The generated code is completely different and not in the same place. On the fiddle everything is generated in the same place and once the element has been initialized it gets data-original-title

which I don't have. And it <div id="ui-tooltip-3"..>

is created just before the tag body

, not there.

Loading bootstrap with LESS. I haven't found any other strange behavior yet. I tried to load bootstrap from CDN after (and without) loading it from my generated less => css file, but with the same problem.

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

Any idea why this is happening?

+3


source to share


1 answer


The problem was a compatibility issue between Bootstrap 3

and Jquery UI

, both used the tooltip element. My solution was to not use the JQuery UI Tooltip addon. (When you can configure the plugin you want to add to the jQuery frontend before loading it)



+8


source






More articles:


All Articles