Bootstrap 3.0 Popovers and tooltips

Javascript Problem Overview

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>

Javascript Solutions

Solution 1 - Javascript

I use this on all my pages to enable tooltip

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

Solution 2 - Javascript

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.

Solution 3 - Javascript

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(); 
});

Solution 4 - Javascript

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

Solution 5 - Javascript

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'
});

Solution 6 - Javascript

You just need to enable the tooltip:

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})

Solution 7 - Javascript

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".

Solution 8 - Javascript

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	user2560895	View Question on Stackoverflow
Solution 1 - Javascript	Evan Larsen	View Answer on Stackoverflow
Solution 2 - Javascript	cssyphus	View Answer on Stackoverflow
Solution 3 - Javascript	Abhishek Goel	View Answer on Stackoverflow
Solution 4 - Javascript	Jonathan	View Answer on Stackoverflow
Solution 5 - Javascript	santa	View Answer on Stackoverflow
Solution 6 - Javascript	xXPhenom22Xx	View Answer on Stackoverflow
Solution 7 - Javascript	cssyphus	View Answer on Stackoverflow
Solution 8 - Javascript	Arcolye	View Answer on Stackoverflow