Tooltips with Twitter Bootstrap

javascript twitter-bootstrap

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)?

Andres Ilich

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.

Perfect! Are there any performance issues with $('[rel=tooltip]').tooltip()?

@schmmd i see no reason why there will be a performance hit, unless you have 100 thousand tooltips to select, so not too much to worry about it, it is an attribute selector the likes of CSS's.

you may not care about semantics, but ideally rel is best reserved for those purposes and class might be better here, see stackoverflow.com/questions/15214776/…

great tip about the rel="tooltip"!

Best use data-rel="tooltip" instead of rel="tooltip" to conform with HTML standards.

Mohamad Shiralizadeh

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.

Nate-Wilkins

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

this works for me, at present the tooltip appears at the top of the element. How do I change it so that the tooltip appears at the bottom?

Bojangles

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>

Amged

Simply mark all the data-toggles...

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

http://jsfiddle.net/Amged/xUQ6D/19/

Eric Herlitz

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

Fyi, this is actually an early thing I tried. You can't use class tooltip. It blanks out the contents of the tag. I switched to tooltiparea.

I wasn't hoping for magic, I'm just wondering why bootstrap doesn't run the code you specified with some class I can include.

dwlz

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>

Tooltips with Twitter Bootstrap

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US