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           lt  DOCTYPE html gt       lt html gt         lt head gt           lt title gt Bootstrap 101 Template lt  title gt           lt meta name  viewport  content  width device-width  initial-scale 1 0  gt           lt  -- Bootstrap -- gt           lt link href  css bootstrap min css  rel  stylesheet  media  screen  gt           lt link href  http   netdna bootstrapcdn com twitter-bootstrap 2 3 1 css bootstrap-combined min css  rel  stylesheet  media  screen  gt           lt link href  css font-awesome min css  rel  stylesheet  media  screen  gt           lt link href  css index css  rel  stylesheet  media  screen  gt           lt  -- HTML5 shim and Respond js IE8 support of HTML5 elements and media queries -- gt           lt  -- if lt IE 9  gt             lt script src        assets js html5shiv js  gt  lt  script gt             lt script src        assets js respond min js  gt  lt  script gt           lt   endif -- gt         lt  head gt         lt body gt          lt p id  tool class  muted  style  margin-bottom  0   gt          Tight pants next level keffiyeh          lt a href     data-toggle  tooltip  title  Default tooltip  gt you probably lt  a gt  haven t heard of them  Photo booth beard raw denim letterpress vegan messenger bag stumptown  Farm-to-table seitan  mcsweeney s fixie sustainable quinoa 8-bit american apparel  lt a href     data-toggle  tooltip  title  Another tooltip  gt have a lt  a gt  terry richardson vinyl chambray  Beard stumptown  cardigans banh mi lomo thundercats  Tofu biodiesel williamsburg marfa  four loko mcsweeney s cleanse vegan chambray  A really ironic artisan  lt a href     data-toggle  tooltip  title  Another one here too  gt whatever keytar lt  a gt   scenester farm-to-table banksy Austin  lt a href     data-toggle  tooltip  title  The last tip   gt twitter handle lt  a gt  freegan cred raw denim single-origin coffee viral  lt  p gt          lt h3 gt Live demo lt  h3 gt           lt div style  padding-bottom  24px   gt             lt a id  pop  href     class  btn btn-lg btn-danger  data-toggle  popover  title  A Title  data-content  And here s some amazing content  It s very engaging  right   gt Click to toggle popover lt  a gt           lt  div gt            lt  -- jQuery  necessary for Bootstrap s JavaScript plugins  -- gt           lt script src  http   code jquery com jquery js  gt  lt  script gt           lt  -- Include all compiled plugins  below   or include individual files as needed -- gt           lt script type  text javascript  gt                document  ready function                          tool   tooltip                        btn   popover                       END   document  ready             lt  script gt            lt script src  http   netdna bootstrapcdn com twitter-bootstrap 2 3 1 css bootstrap min css  gt  lt  script gt          lt  body gt        lt  html gt

User · Accepted Answer

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:

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.

User · Answer

I use this on all my pages to enable tooltip    function          data-toggle  tooltip     tooltip

User · Answer

For some reason the only way I was able to get my code to work is by switching couple of things  If nothing worked for you so far  please give a whirl to this      body   popover        selector    data-toggle  popover          trigger   hover       placement   right

User · Answer

You just need to enable the tooltip      some id or class that you add to the above a tag   popover       trigger   hover

User · Answer

If you re using Rails and ActiveAdmin  this is going to be your problem  https   github com seyhunak twitter-bootstrap-rails issues 450 Basically  a conflict with active admin js  This is the solution  https   stackoverflow com a 11745446 264084  Karen s answer  tldr  Move active admin assets into the  vendor  directory

User · Answer

I had to do it on DOM ready     document   ready function         this has to be done after the document has been rendered         data-toggle  tooltip     tooltip  html  true       enable bootstrap 3 tooltips         data-toggle  popover     popover           trigger   hover            placement    top            show   true               And change my load orders to be    jQuery jQuery UI Bootstrap

User · Answer

Working with BOOTSTRAP 3   Short and Simple  Check - JS Fiddle  HTML   lt div id  myDiv  gt   lt button class  btn btn-large btn-danger  data-toggle  tooltip  data-placement  top  title    data-original-title  Tooltip on top  gt Tooltip on top lt  button gt       lt  div gt    Javascript    function               data-toggle  tooltip     tooltip

User · Answer

You have a syntax error in your script and  as noted by xXPhenom22Xx  you must instantiate the tooltip    lt script type  text javascript  gt         document  ready function                  btn-danger   tooltip               END   document  ready     lt  script gt    Note that I used your class  btn-danger   You can create a different class  or use an id  someidthatimakeup

[javascript] Bootstrap 3.0 Popovers and tooltips

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap