Question

I thought this would be simple enough but somethings wrong. The only Bootstrap gem im using is the simple form one.

I have the following html:

app/views/users/new.html.erb

<div id="hint">hint</div>

And then in my application.js file for javascript I have:

//= require jquery
//= require jquery_ujs
//= require bootstrap.min.js
//= require_self
//= require_tree .
//= require_tree ../../../vendor/assets/javascripts/.

$("#hint").popover({
    title: 'A title!',
    content: 'Some content!'
})

In the Twitter Bootstrap Tooltip Instructions it says to just put this:

$('#example').tooltip(options)

But I’m not getting anything. How do I use this?

---

ANSWER

I had to do this to get it to work:

<div id="hint">
  <a href="#" rel="tooltip" title="some content">hint</a>
</div>

jQuery( function($) {
    $("#hint a").tooltip()
});

Answer 1

I had the same problem once, and found that if I moved my $(example).tooltip() statement from the bottom of my .js file to the top, it started working. I never did figure out what is was about the JavaScript in the file that made the tooltip not work.

BTW, I am confused. Are you doing a tooltip or a popover? If it is a tooltip, you should have a link element, like this

<div id="hint"><a href="#" rel="tooltip" title="some content">hint</a></div>

in your HTML and then

$("#hint a").tooltip()

in your JavaScript.