84

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.

       <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
        <link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
        <link href="css/index.css" rel="stylesheet" media="screen">
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="../../assets/js/html5shiv.js"></script>
          <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
       <p id="tool"class="muted" style="margin-bottom: 0;">
        Tight pants next level keffiyeh
        <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> 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 <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> 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 <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
       <h3>Live demo</h3>
        <div style="padding-bottom: 24px;">
          <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?">Click to toggle popover</a>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://code.jquery.com/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript">
            $(document).ready(function() {

                $('.tool').tooltip();
                $('.btn').popover();

            }); //END $(document).ready()

        </script>

        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>

      </body>

    </html>
Efe Omoregie Elijah
  • 487
  • 4
  • 8
user2560895
  • 1,481
  • 3
  • 13
  • 11
  • I just posted the same question a few minutes ago, also using BS3 with everything else working like Modals and Tabs but no Tooltips or Popovers... will update you should I find something. – xXPhenom22Xx Aug 23 '13 at 20:12
  • for popover, **options** is not defined – Cybermaxs Aug 23 '13 at 20:18
  • For now I was just trying to get the default behavior but I am interested in making it show on hover instead of click but that was next. Do I still need to put something in for options? – user2560895 Aug 23 '13 at 20:40
  • The code above is what I am currently using and it is still not working. Any suggestions? Do I have thing in the wrong order or something? – user2560895 Aug 24 '13 at 18:10

8 Answers8

231

I use this on all my pages to enable tooltip

$(function () { $("[data-toggle='tooltip']").tooltip(); });
Evan Larsen
  • 9,935
  • 4
  • 46
  • 60
  • 4
    thanks, out of all the answers I've given I would have to say I probably spent the least time on this one. But yet somehow it has awarded the most points. – Evan Larsen Aug 19 '14 at 20:08
  • But the problem is. it's not working with chrome for me. then i ended up with doing some thing http://jsfiddle.net/arunpjohny/4HptX/4/ from this post http://stackoverflow.com/questions/18372632/bootstrap-tooltip-not-working-in-chrome – Md. Salahuddin Sep 05 '14 at 06:55
  • @Md Salahuddin, so its working now, once you updated your jquery? Are you asking a question or was that a statement? – Evan Larsen Sep 08 '14 at 17:14
  • 1
    It's just a statement. i used http://jsfiddle.net/arunpjohny/4HptX/4/ instead since this code was not working with chrome for my case. – Md. Salahuddin Sep 08 '14 at 17:28
147

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.

Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • in the jsFiddle, why is trigger not surrounded by single quotes but placement is? – HPWD Nov 04 '13 at 18:33
  • There is no good reason, I just missed it. But it seems to work. Perhaps single-word keys do not need the quotes -- sometimes they are not required -- nevertheless, I usually put them in. – cssyphus Nov 04 '13 at 21:34
  • that sounds logical to me. Thanks for clarifying. – HPWD Nov 05 '13 at 14:16
  • 4
    that sounds like gibberish to me. Ha! just had to say it ;) – Evan Larsen Dec 31 '13 at 22:13
  • Can you use that method in relativity to a specific container? Instantiating all tooltips or popovers within a specific container? – Michael Ecklund Jul 21 '14 at 19:22
  • Should be able to... [here's a jsFiddle](http://jsfiddle.net/oLsqdkzq/) that demonstrates isolating one div from amongst the selection of all divs containing attribute `data-toggle="tooltip"`. In the jsFiddle example, you want to instantiate tooltips in one div, not color one div's background yellow -- so you would replace the line `$(this).css('background','yellow');` with `$(this).tooltip({'placement': 'top'});` – cssyphus Aug 19 '14 at 19:40
27

Working with BOOTSTRAP 3 : Short and Simple

Check - JS Fiddle

HTML

<div id="myDiv">
<button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>    
</div>

Javascript

$(function () { 
    $("[data-toggle='tooltip']").tooltip(); 
});
Abhishek Goel
  • 18,785
  • 11
  • 87
  • 65
  • This will not work if you want to have pop over functionality for data that is loading asynchronously (ajax, angular etc) but the answer below will. – Adrian Hedley Apr 10 '15 at 11:15
6

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
Jonathan
  • 6,741
  • 7
  • 52
  • 69
  • 1
    i had a similar issue, was loading jquery ui after bootstrap, your answer made me realize the issue with that. – hubson bropa Dec 22 '14 at 22:04
  • check [this](http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-popovers.php) for popover, **1. Triggering the Popovers , 2. Positioning of Popovers via Data Attributes** – Shaiju T Nov 09 '15 at 14:31
5

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'
});
santa
  • 12,234
  • 49
  • 155
  • 255
  • 1
    This is the only thing that worked for me since the popover element may not be in view to begin with. Thanks! – J. Titus Jun 20 '15 at 17:42
0

You just need to enable the tooltip:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
xXPhenom22Xx
  • 1,265
  • 5
  • 29
  • 63
0

You have a syntax error in your script and, as noted by xXPhenom22Xx, you must instantiate the tooltip.

<script type="text/javascript">

    $(document).ready(function() {

        $('.btn-danger').tooltip();

    }); //END $(document).ready()

</script>

Note that I used your class "btn-danger". You can create a different class, or use an id="someidthatimakeup".

cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • Ok I have changed the code to match what you suggested, I think. It is still not working. I do not know Javascript yet so this is a little tricky. I am just trying to get the examples they have to work the same way. – user2560895 Aug 24 '13 at 01:28
  • The popover one is a little difficult but I got the tooltip one to work as above. – cssyphus Aug 24 '13 at 22:22
0

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.

Community
  • 1
  • 1
Arcolye
  • 6,968
  • 4
  • 34
  • 28