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 something for the popover and tooltips. I am getting tooltips to show up but they are not styled and located like the bootstrap examples. And the popover is not working at all. Please take a look and let me know what I am missing. ``` Bootstrap 101 Template

Accepted Answer

Turns out that Evan Larsen has the best answer.

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:

- Get reference for Twitter Bootstrap CDN from here: http://www.bootstrapcdn.com/

- 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

- In jsFiddle, on left side, open the External Resources accordion dropdown

- Paste in each URL, pressing plus sign after each paste

- Now, open the "Frameworks & Extensions" accordion dropdown, and select jQuery 1.9.1 (or whichever...)

NOW you are ready to go.

Bootstrap 3.0 Popovers and tooltips

Solution

Problem

Related problems