Bootstrap tooltips not working
Twitter BootstrapTwitter Bootstrap Problem Overview
I'm going mad here.
I've got the following HTML:
<a href="#" rel="tooltip" title="A nice tooltip">test</a>
And the Bootstrap style tooltip refuses to display, just a normal tooltip.
I've got bootstrap.css working just fine, and I can see the classes in there
I've got all of the relevant JS files at the end of my HTML file:
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>
I've looked at the source of Bootstrap's example and cannot see anything that initiates the tooltip anywhere in there. So I'm guessing it should just work, or am I missing something vital here?
I've got modals and alerts and other things working just fine, so I'm not a total moron ;)
Thanks for any help!
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
To sum up: activate your tooltips using jQuery selectors
<script type="text/javascript">
$(function () {
$("[rel='tooltip']").tooltip();
});
</script>
In fact, you don't need to use the attribute selector, you can invoke it on any element even if it doesn't have rel="tooltip" in its tag.
Solution 2 - Twitter Bootstrap
After experiencing the same problem, I found this solution worked without having to add additional tag attributes outside of the Bootstrap required attributes.
HTML
<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>
JQuery
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
Hope this helps!
Solution 3 - Twitter Bootstrap
You don't need all js files separately
Just use the following files if you are going to use all bootstrap functions:
-bootstrap.css
-bootstrap.js
both of them can be found in http://twitter.github.com<br>
and finally
-Latest version of jquery.js
For Glyphicons you need the image
glyphicons-halfings.png and/or glyphicons-halfings-white.png(white coloured images)
which you need to upload inside /img/ folder of your website (or) store it where ever you want but change the folder directory inside the bootstrap.css
For tooltip you need the following script inside your
<head> </head> tag
<script type='text/javascript'>
$(document).ready(function () {
if ($("[rel=tooltip]").length) {
$("[rel=tooltip]").tooltip();
}
});
</script>
That's it...
Solution 4 - Twitter Bootstrap
http://getbootstrap.com/javascript/#tooltips-usage
Opt-in functionality For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning
> you must initialize them yourself.
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
putting this piece of code in your html allows you to use the tooltips
Examples:
<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
Solution 5 - Twitter Bootstrap
HTML
<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>
JQuery
$(document).ready(function() {
$('[data-toggle=tooltip]').tooltip();
});
This one is work for me.
Solution 6 - Twitter Bootstrap
I know this is an old question, but since I had this problem with the new release of bootstrap and its not clear on the website, here is how you enable the tooltip.
give your element a class like "tooltip-test"
then activate this class in your javascript tag:
<script type="text/javascript">
$('.tooltip-test').tooltip();
</script>
<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>
Solution 7 - Twitter Bootstrap
If you do $("[rel='tooltip']").tooltip(); as other answers have suggested then you will activate tooltips only on elements that are currently there in DOM. That means if you are going to change DOM and insert dynamic content later it won't work. Also this is much less efficient because it installs event handler for individual elements as opposed to using JQuery event delegation. So the best way I've found to activate Bootstrap tooltips is this one line of code that you can place in document ready and forget about it:
$(document.body).tooltip({ selector: "[title]" });
Note that I'm using title as selector instead of rel=title or data-title. This has an advantage that it can be applied to many other elements (the rel is supposed to be only for anchors) and also it works as "fallback" for old browsers.
Also note that you don't need data-toggle="tooltip" attribute if you are using above code.
Bootstrap tooltips are expensive because you need to handle mouse events on each of the elements. This is the reason why they haven't enabled it by default. So if you ever decide to comment out above line, your page would still work if you use title attribute.
If you are OK not to use title attribute then I would recommend using pure CSS solution such as Hint.css or check http://csstooltip.com which does not require any JavaScript code at all.
Solution 8 - Twitter Bootstrap
This is the simplest way.
Just put this before </body>:
<script type="text/javascript">
$("[data-toggle=\"tooltip\"]").tooltip();
</script>
Check out the examples given in the Bootstrap's documentation about tooltips.
For example:
<a href="#"
data-toggle="tooltip"
data-placement="bottom"
title="Tooltip text here">Link with tooltip</a>
Solution 9 - Twitter Bootstrap
Tooltip and popover are NOT only-css plugins like dropdown or progressbar. To use tooltips and popover, you MUST to activate them using jquery (read javascript).
So, lets say we want a popover to be shown on click of an html button.
<a href="#" role="button"
class="btn popovers-to-be-activated"
title="" data-content="And here's some amazing content."
data-original-title="A Title" "
>button</a>
Then you need to have following javascript code to activate popover:
$('.popovers-to-be-activated').popover();
Actually, above javascript code will activate popover on all the html elements which have class "popovers-to-be-activated".
Needless to say, put the above javascript inside DOM-ready callback to activate all popovers as soon as DOM is ready:
$(function() {
// Handler for .ready() called.
$('.popovers-to-be-activated').popover();
});
Solution 10 - Twitter Bootstrap
in head section you need to add the following code first
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Then in the body section you need to do write the following code
<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
Solution 11 - Twitter Bootstrap
If everything is still not resolved Use Latest Jquery library, you dont need any of the jquery selectors if you use the latest bootstrap 2.0.4 and jquery-1.7.2.js
Just use rel="tooltip" title="Your Title" data-placement=" "
Use top / bottom / left / right in the data-placement as per your wish.
Solution 12 - Twitter Bootstrap
Lets use an example to show how the Tooltips can be added to any HTML element in your document.
NOTE:
If these tooltip samples don't work when you put them in your page, then you have another problem. You need to look at things like:
-
The order of scripts being included
-
See if you are trying to initialize HTML elements that have been removed
-
See if you are trying to call methods in JS files you are no longer including
-
See if you are including the JS file that provides the functionality you need (not just for tooltips, but any components you use on the page).
<head> <link rel="stylesheet" href="/Content/bootstrap.css" /> <link rel="stylesheet" href="/Content/animate.css" /> <link rel="stylesheet" href="/Content/style.css" /> </head> <body> ... your HTML code ... <script src="/Scripts/jquery-2.1.1.js"></script> <script src="/Scripts/bootstrap.min.js"></script> <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA --> ... your JavaScript initializers ... </body>
Failure of ANY of the above items can (and often does) prevent javascript from loading and/or running, and that keeps everything nice and broken.
WORKING EXAMPLES
Let's say you have a badge, and you want it to show a tooltip when the user hovers over it.
Original HTML:
<span class="badge badge-sm badge-plain">Admin Mode</span>
Plain Bootstrap Tooltips
If you are creating tooltips for an HTML Element, and you are using Plain Bootstrap tooltips, then you will be responsible for calling the Tooltip Initializers with your own JavaScript code.
BEFORE
<span class="badge badge-sm badge-plain">Admin Mode</span>
AFTER
<span
class="badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>
INITIALIZER
<script>
// Initialize any Tooltip on this page
$(document).ready(function ()
{
$('[data-toggle="tooltip"]').tooltip();
}
);
</script>
Bootstrap Template Tooltips (such as INSPINIA)
If you are using a bootstrap template (such as INSPINIA), you are including a supporting script to support the template features:
<script src="/Scripts/app/inspinia.js" />
In the case of INSPINIA, the included script automatically initializes all tooltips by running the following javascript code when the document is finished loading:
// Tooltips demo
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
});
Because of this, you do NOT have to initialize INSPINIA-style Tooltips yourself. But you DO have to format your elements in a specific way. The Initializer looks for HTML elements with tooltip-demo in the class attribute, then calls the tooltip() method to initialize any child elements that have the attribute data-toggle="tooltip" defined.
For our example badge, place an outer element around it (like a <div> or <span>) that has class="tooltip-demo", then place the data-toggle, data-placement, and title attributes for the actual tooltip within the element that is the badge. Modify the original HTML from above to look something like this:
BEFORE
<span class="badge badge-sm badge-plain">Admin Mode</span>
AFTER
<span class="tooltip-demo">
<span
class="badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>
</span>
INITIALIZER
None
Note that any child elements within the <span class="tooltip-demo"> element will have their tooltip properly prepared. I could have three child elements, all needing tooltips, and place them within one container.
Multiple Items, each with a Tooltip
<span class="tooltip-demo">
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
<span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>
The best use for this would be to add the class="tooltip-demo" to a <td> or an outermost <div> or <span>.
Plain Bootstrap Tooltips while using a Template
If you are using INSPINIA, but you don't want to add extra outer <div> or <span> tags to create tooltips, you can use standard Bootstrap Tooltips without interfering with the template. In this case, you will be responsible for initializing the Tooltips yourself. However, you should use a custom value in the class attribute to identify your Tooltip items. This will keep your Tooltip initializer from interfering with elements affected by INSPINIA. In our example, let's use standalone-tt:
BEFORE
<span class="badge badge-sm badge-plain">Admin Mode</span>
AFTER
<span
class="standalone-tt badge badge-sm badge-plain"
data-toggle="tooltip"
data-placement="right"
title="Tooltip on right"
>Admin Mode</span>
INITIALIZER
<script>
// Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
$(document).ready(function ()
{
$('.standalone-tt').tooltip();
}
);
</script>
Solution 13 - Twitter Bootstrap
you can use Popper.js
<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>
And call tooltip function:
$('document').ready(function(){
$('[data-toggle=tooltip]').tooltip();
});
Solution 14 - Twitter Bootstrap
I have added jquery and bootstrap-tooltip.js in header. Adding this code in footer works for me! but when i add the same code in header it doesn't work!
<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>
Solution 15 - Twitter Bootstrap
If using Rails+Haml is much easier to include the tooltip, just do:
= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"
That is just add the following line at the end of the element.
:rel => "tooltip", :title => "Referential Guide"
Solution 16 - Twitter Bootstrap
In my particular case, it didn't work because I was including two versions of jQuery. One for bootstrap, but another one (another version) for Google Charts.
When I remove the jQuery loading for the charts, it works fine.
Solution 17 - Twitter Bootstrap
If you are creating your html that contains the tooltip with javascript, and then inserting it into the document, you have to activate the popover/tooltip AFTER you have inserted the html into the document, not on document load...
Solution 18 - Twitter Bootstrap
I just added:
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
below bootstrap.min.js and it works.
Solution 19 - Twitter Bootstrap
You must put the tooltip javascript after the html. like this :
<a href="#" rel="tooltip" title="Title Here"> I am Here</a>
<script>
$("* [rel='tooltip']").tooltip({
html: true,
placement: 'bottom'
});
</script>
Or use $(document).ready :
$(document).ready(function() {
$("* [rel='tooltip']").tooltip({
html: true,
placement: 'bottom'
});
});
</script>
The tooltip not working because you put the tooltip html before the javascript, so they don't know if there is a javascript for the tooltip. In my opinion, the script is read from the top to the bottom.
Solution 20 - Twitter Bootstrap
I had a similar issue and especially if you are running in a button container like a vertical button container. In that case you have to set the container as the 'body'
I have added a jsfiddle example
Solution 21 - Twitter Bootstrap
Put your code inside document ready
$(document).ready(function () {
if ($("[rel=tooltip]").length) {
$("[rel=tooltip]").tooltip();
}
});
In my case I was also missing the tooltip css classes on http://twitter.github.com/bootstrap/assets/css/bootstrap.css so son't forget that.
Solution 22 - Twitter Bootstrap
From bootstrap docs on tooltips
Tooltips are opt-in for performance reasons, so you must initialize them yourself. One way to initialize all tooltips on a page would be to select them by their data- toggle attribute:
$('[data-toggle="tooltip"]').tooltip()
Solution 23 - Twitter Bootstrap
You need to do the following. Add the
<script type="text/javascript">
$(function () {
$("[rel='tooltip']").tooltip();
});
</script>
code somewhere on your page (preferably in the <head> section).
Also add data-toggle: "tooltip" to anything you want to enable with it.
Solution 24 - Twitter Bootstrap
Add data-toggle="tooltip" at whatever elements you want with a tooltip.
Solution 25 - Twitter Bootstrap
Quick and lighter alternative to Bootstrap tooltip plugin:
HTML:
<div>
<div class="mytooltip" id="pwdLabel">
<label class="control-label" for="password">Password</label>
<div class="mytooltiptext" id="pwdLabel_tttext">
6 characters long, must include letters and numbers
</div>
</div>
<input type="password" name="password" value="" id="password" autocomplete="off"
class="form-control"
style="width:125px" />
</div>
CSS:
<style>
.mytooltiptext {
position: absolute;
left: 0px;
top: -45px;
background-color: black;
color: white;
border: 1px dashed silver;
padding:3px;
font-size: small;
text-align: center;
}
.mytooltip {
position: relative;
}
.mytooltip label {
border-bottom: 1px dashed black !important;
}
</style>
JSCRIPT:
$(".mytooltip").mouseover(function(){
var elm = this.id;
$("#" + elm + "_tttext").fadeIn("slow");
});
var ttTmo;
$(".mytooltip").mouseout(function(){
var elm = this.id;
clearTimeout(ttTmo);
ttTmo = setTimeout(function(){
$("#" + elm + "_tttext").fadeOut("slow");
},3000);
});
Label/text must be enclosed in a wrapper of class "mytooltip" This wrapper must have an Id.
After the label there is the tool tip text wrapped in a div of class "mytooltiptext" and id consisting of the id of the parent wrapper + "_tttext". Other options for selectors can be used.
Hope it helps.