Twitter Bootstrap tooltip() stopped working

Question

Having a problem with Bootstrap tooltips suddenly not working. They are being included like this:

//Gemfile
gem 'bootstrap-sass', '~> 3.2'

//application.js
//= require jquery
//= require bootstrap

//application.sass
@import "bootstrap"

They have been included like this for the past year with no problem. In dev tools I can even get a reference to jQuery element and the auto complete of dev tools shows that tooltip() is available.

But when I call tooltip() on the element, upon hovering over this element—nothing happens.

I do this same action on http://getbootstrap.com/ it works.

Another strange thing is when I use the html attributes to trigger a tooltip, like so:

//using Slim as an example
a[href title="hello world" data-toggle="tooltip" data-placement="left"] My Link

I do get a tooltip but the style is all wrong

I inspected the tooltip and copied this tooltips HTML:

<div role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content" id="ui-id-15" style="position: relative; top: -483.25px; left: 0px; display: block;">          
<div class="ui-tooltip-content">hello world</div>

I did the same for the tooltip on http://getbootstrap.com/ :

<div class="tooltip fade bottom in" role="tooltip" id="tooltip136998" style="top: 18263px; left: 492.984px; display: block;">

Tooltip on bottom

The HTML is even different. My tooltip has no arrow.

I am using Rails, sass, Angular, bootstrap via the 'bootstrap-sass' gem

Answer 1

It looks that you have j Query UI tooltip in your project that conflicts with the Bootstrap's.

Either get rid of jQuery UI or use the following workarounds (depending on your libraries load order):

// bootstrap -> workaround -> jQueryUI
$.fn.bootstrapTooltip = $.fn.tooltip.noConflict();

// jQueryUI -> workaround -> bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

UPD: note that if you decide to use both libraries in your project, you might also need a workaround for jQueryUI/Bootstrap $.fn.button .