Bootstrap Tooltip in Ruby on Rails

Question

I'm trying to get this done for quite some time now and i can't figure out whats wrong:

My Link:

<%= link_to '#', tag, class: "tag-tooltip",
                    :data => {:toggle=>"tooltip"},
                    'data-original-title' => "Hey Whats up",
                    'data-placement' => 'right'%>

My Javascript:

$('.tag-tooltip').tooltip();

But it's not working... What am i missing ?

EDIT

If i go into my Chrome Console and insert ($('.tag-tooltip').tooltip();) it is working.

So i guess the js file is not loading ? (I checked my application.js and i'm requiring everything.)

Doxology

Do you have $(document).ready(function(){...}); wrapped around $('.tag-tooltip').tooltip();? – Actinomycete

I LITERALLY just found it and it worked.. But why do i have to wrap it ?? Is it because Turbolinks ? – Doxology

because you want to make sure that the DOM is fully loaded so that all referenced elements are found. – Actinomycete

Answer 1

I found out the wrapping which worked:

$(document).on("ready page:change", function() {
  $('.tag-tooltip').tooltip();
});

Update:

$(document).on("turbolinks:load",function(){
  $('.tag-tooltip').tooltip();
})

With vanilla JS

document.addEventListener("turbolinks:load", function() {
  $('.tag-tooltip').tooltip();
});

Doxology

It seem to be $(document).on('turbolinks:load', function() {/**/}) with newer turbolink versions. – Elated

$(document).on('turbolinks:load', function() {/**/}) – Vodka

Answer 2

In my case the problem was that I was loading jquery-ui after bootstrap-sprockets

In my application.js I changed:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require jquery-ui

to

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require turbolinks
//= require bootstrap-sprockets

Then it all started working as it should.

Leslielesly

Answer 3

You need to add some script in your code :

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(
      {container:'body', trigger: 'hover', placement:"right"}
    );   
  });

Proteiform