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.)

Solution

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();
});

Comments

[vee]

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

[vee]

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

[Tsunamis]

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