Best IT Recipes

Bootstrap 3.0 Popovers and Tooltips

I'm new to Bootstrap, and I'm having trouble enabling popover and tooltip functions. I had no problems with drop-down lists and models, but it seems to me that something is missing for popover and tooltips.

I get tooltips, but they are not stylized and are arranged as examples of bootstrapping. And popover doesn't work 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 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 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 some amazing content. It very engaging. right?">Click to toggle popover</a> </div> <!-- jQuery (necessary for Bootstrap 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>
+80
javascript jquery css twitter-bootstrap
Aug 23 '13 at 20:01
source share
8 answers

It turns out that Evan Larsen has the best answer . Please support his answer (and / or select it as the correct answer) - he is brilliant.

JsFiddle works here

Using the Evan trick, you can create all the hints with a single line of code:

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

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

In the jsFiddle example (link above), I also added a situation where one hint is enabled by default (by the login button). Additionally, tooltip code is added to the button in jQuery, not HTML markup.



Popovers work the same as tooltips:

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


And here it is! Success at last.

One of the biggest problems in calculating this stuff was to start bootstrap using jsFiddle ... Here's what you have to do:

  • Get a link for Twitter Bootstrap CDN from here: http://www.bootstrapcdn.com/
  • Paste each link into notepad and cross out ALL except the URL. For example:
    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
  • In jsFiddle, on the left side, open the external resources accordion drop-down list
  • Paste into each URL by clicking the plus sign after each paste
  • Now open the Frames and Extensions accordion drop-down menu and select jQuery 1.9.1 (or whatever ...)

NOW, you are ready to go.

+143
Aug 30 '13 at 16:31
source share

I use this on all my pages to include a hint

 $(function () { $("[data-toggle='tooltip']").tooltip(); });
+225
Aug 23 '13 at 20:47
source share

Working with BOOTSTRAP 3: Short and Simple

Validation - 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(); });
+26
Jan 12 '14 at 9:59
source share

I needed to do this on the 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 download orders as follows:

  • JQuery
  • JQuery user interface
  • Bootstrap
+6
Apr 03 '14 at 18:08
source share

For some reason, the only way to get my code to work is by switching a few things. If so far nothing has worked, I ask you about this:

 $('body').popover({ selector: '[data-toggle="popover"]', trigger: 'hover', placement: 'right' });
+5
Sep 08 '14 at 20:21
source share

You just need to enable the tooltip:

 $('some id or class that you add to the above a tag').popover({ trigger: "hover" })
0
Aug 23 '13 at 20:16
source share

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

 <script type="text/javascript"> $(document).ready(function() { $('.btn-danger').tooltip(); }); //END $(document).ready() </script>

Please note that I used your btn-danger class. You can create another class or use id="someidthatimakeup" .

0
Aug 23 '13 at 20:23
source share

If you use Rails and ActiveAdmin, this will be your problem: https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 Basically, there is a conflict with active_admin.js

This is the solution: https://stackoverflow.com/a/167268/168 (answer Karen) TL; DR: move active_admin assets to the vendor directory.

0
May 4 '15 at 5:41
source share


More articles:


All Articles