CODEWITHSUNDEEP
jqueryangularjstwitter-bootstrap
GN.
GN.

Reputation: 9819

Twitter Bootstrap tooltip() stopped working

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.

dev tools enter image description here

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 enter image description here

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

Upvotes: 2

Views: 399

Answers (1)

Maksim Vi.
Maksim Vi.

Reputation: 9225

It looks that you have jQuery 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.

Upvotes: 2

Related Questions