Bootstrap 3.0 Popovers and tooltips

Question

I am new to Bootstrap and I\'m having trouble getting the popover and tooltip features to work. I had no problem with the drop downs and models but I seem to be missing some

Answer 1

Turns out that Evan Larsen has the best answer. Please upvote his answer (and/or select it as the correct answer) - it's brilliant.

Working jsFiddle here

Using Evan's trick, you can instantiate all tooltips with one line of code:

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

You will see that all tooltips in your long paragraph have working tooltips with just that one line.

In the jsFiddle example (link above), I also added a situation where one tooltip (by the Sign-In button) is ON by default. Also, the tooltip code is ADDED to the button in jQuery, not in the HTML markup.

---

Popovers do work the same as the tooltips:

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

---

And there you have it! Success at last.

One of the biggest problems in figuring this stuff out was making bootstrap work with jsFiddle... Here's what you must do:

1. Get reference for Twitter Bootstrap CDN from here: http://www.bootstrapcdn.com/
   
2. Paste each link into notepad and strip out ALL except the URL. For example:
   //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
   
3. In jsFiddle, on left side, open the External Resources accordion dropdown
4. Paste in each URL, pressing plus sign after each paste
5. Now, open the "Frameworks & Extensions" accordion dropdown, and select jQuery 1.9.1 (or whichever...)

NOW you are ready to go.