Tooltips with Twitter Bootstrap
JavascriptTwitter BootstrapJavascript Problem Overview
I am using Twitter Bootstrap--and I am not a frontend developer! However, it's making the process almost--dare I say--fun!
I'm a bit confused about tooltips. They are covered in the documentation but Twitter assumes some knowledge. For example, they say to trigger the tooltip with the following JavaScript code.
$('#example').tooltip(options)
After poking around on their source, I realized that fields with tooltips need to be in a class and have the following code run.
$('.tooltipclass').tooltip(options)
But now my question is, why doesn't Twitter Bootstrap provide such a class tooltip? Just to allow greater configuration? Is it better to add the individual elements with tooltips to tooltipclass, or should I add the surrounding area to tooltipclass? Does it matter if I use a class identifier (.class) instead of a name identifier (#name)?
Javascript Solutions
Solution 1 - Javascript
I think your question boils down to what proper selector to use when setting up your tooltips, and the answer to that is almost whatever you want. If you want to use a class to trigger your tooltips you can do that, take the following for example:
<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>
Then you can trigger all links with the .link class attached as tooltips like so:
$('.link').tooltip()
Now, to answer your question as to why the bootstrap developers did not use a class to trigger tooltips that is because it is not needed exactly, you can pretty much use any selectors you want to target your tooltips, such as (my personal favorite) the rel attribute. With this attribute you can target all links or elements with the rel property set to tooltip, like so:
$('[rel=tooltip]').tooltip()
And your links would look like something like this:
<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a>
Of course, you can also use a container class or id to target your tooltips inside an specific container that you want to single out with an specific option or to separate from the rest of your content and you can use it like so:
$('#example').tooltip({
selector: "a[rel=tooltip]"
})
This selector will target all of your tooltips with the rel attribute "within" your #example div, this way you can add special styles or options to that section alone. In short, you can pretty much use any valid selector to target your tooltips and there is no need to dirty your markup with an extra class to target them.
Solution 2 - Javascript
The easiest way to use this is
put this in the header:
<script>
$(function ($) {
$("a").tooltip()
});
</script>
and then
<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text">
My link text
</a>
so with that js code if you have tag any where in your page with rel="tooltip" get the bootstrap tooltip.
good luck.
Solution 3 - Javascript
Add this into your header
<script>
//tooltip
$(function() {
var tooltips = $( "[title]" ).tooltip();
$(document)(function() {
tooltips.tooltip( "open" );
});
});
</script>
Then just add the attribute title="your tooltip" to any element
Solution 4 - Javascript
I included the JS and CSS file and was wondering why it is not working, what made it work was when I added the following in <head>:
<script>
jQuery(function ($) {
$("a").tooltip()
});
</script>
Solution 5 - Javascript
Simply mark all the data-toggles...
jQuery(function () {
jQuery('[data-toggle=tooltip]').tooltip();
});
Solution 6 - Javascript
That's because these things (I mean tooltip etc) are jQuery plug-ins. And yes, they assume some basic knowledge about jQuery. I would suggest you to look for at least a basic tutorial about jQuery.
You'll always have to define which elements should have a tooltip. And I don't understand why Bootstrap should provide the class, you define those classes or yourself. Maybe you were hoping that bootstrap did automatically some magic? This magic however, can cause a lot of problems as well (unwanted side effects).
This magic can be easily achieved to just write $(".myclass").tooltip(), this line of code does exact what you want. The only thing you have to do is attach the myclass class to those elements that need to apply the tooltip thingy. (Just make sure you run that line of code after your DOM has been loaded. See below.)
$(document).ready(function() {
$(".myclass").tooltip();
});
EDIT: apparently you can't use the class tooltip (probably because it is somewhere internally used!).
> I'm just wondering why bootstrap doesn't run the code you specified with some class I can include.
The thing you want produces almost the same code as you have to do now. The biggest reason however they did not do that, is because it causes a lot of trouble. One person wants to assign it to an element with an ID; others want to assign it to elements with a specified classname; and again others want to assign it to one specified element achieved through some selection process. Those 3 options cause extra complexity, while it is already provided by jQuery. I haven't seen many plugins do what you want (just because it is needless; it really doesn't save you code).
Solution 7 - Javascript
Simple use of this:
<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip">
tooltip
</a>
Using jQuery:
$(document).ready(function(){
$('#mytooltip').tooltip();
});
You can left side of tooltip u can simple add this->data-placement="left"
<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip" data-placement="left">tooltip</a>