[Tutorial] How to Use the Bootstrap Tooltip

In this blog post, we’ll discuss the Bootstrap Tooltip, what it is and how we can code one. First of all, let’s see how it looks:

Update Bootstrap 4 Beta

In Bootstrap 4 Beta they removed support for auto placement options for the Tooltips

History of the Bootstrap Tooltip

This is inspired by a great jQuerry plugin created by Jason Frame to display information that hovers over a particular element. These tooltips are an updated version which uses CSS3 for animations and data-attributes for the local title storage.

Tooltips are great for Web Design and UX

Users need tooltips to understand unfamiliar objects which they can’t directly see in the user interface. So tooltips are a powerful way to make UI simpler – it provides information when users need it, with less effort. Also, it helps developers to use screen space more efficiently and reduce the screen clutter.

But keep in mind – bad designed tips are annoying, overwhelming, distracting and totally unhelpful.

If your question is to tooltip or not to tooltip keep in mind that your design should be a solution to a problem.

It is not advisable to  use a tooltip to provide information that you can’t read elsewhere. Mobile phones, screen readers, and SEO crawlers can’t mouseover (although they can sometimes see the text anyway depending how they’re implemented).

If a button, label, or icon has little to no descriptive text or needs some short explanation, then a tooltip works well for this. You can see examples of this all throughout the StackExchange web app, in fact. If they didn’t have tooltips on all the up & down arrows next to each answer, some people might think they’re for scrolling.

But if the text you use in a tooltip is a redundant rehash of the label, then it’s pointless. The unfortunate thing about tooltips is that they cover up the area underneath them. So excessive tooltips can become annoying to the user, especially if the user is trying to ignore them anyway.

Also, if the tooltip is beyond a certain length that the user is going to read, then you really need some other mechanism. After all, the tooltip is only going to be visible for a few seconds.

Creating a Tooltip with Bootstrap

Things to know when using a Tooltip

1. To use tooltips, you have to rely on a 3rd party library called Tether for positioning. For this to work, you have to include tether.min.js before bootstrap.js to work.
2. Zero-length text display will never be displayed.
3. You have to opt-in / mouse-over / initialize for the tooltip to be displayed. This is great for performance reasons.
4. Tooltips will not work on hidden elements.
5. When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap;on your <a> to avoid this behavior.
6. Tooltips for .disabled or disabled elements must be triggered on a wrapper element.

Step 1 – Add the markup for Tooltip

To create a tooltip, you need to add the attribute data-toggle="tooltip" to an element. The text inside the tooltip that would display on hover can be specified using the attribute title.

Here is the standard markup for adding a tooltip to a hyperlink.

<a href="#" data-toggle="tooltip" title="Some text">Hover over me</a>

<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

Step 3 – Set the directions / placement of Tooltips

You have 4 placement options – bottom, top, right and left.

Here’s the code for data attributes:

<a href="#" data-toggle="tooltip" data-placement="top" title="Default tooltip">Tooltip</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Another tooltip">Another tooltip</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="A large tooltip.">Large tooltip</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="The last tip!">Last tooltip</a>

And here’s the code with JavaScript:

<script type="text/javascript">
$(document).ready(function(){
    $(".tip-top").tooltip({placement : 'top'});
    $(".tip-right").tooltip({placement : 'right'});
    $(".tip-bottom").tooltip({placement : 'bottom'});
    $(".tip-left").tooltip({ placement : 'left'});
});
</script>

Tooltips Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an element’s tooltip. Returns to the caller before the tooltip has actually been shown (i.e. before the shown.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip. Tooltips with zero-length titles are never displayed.

$('#element').tooltip('show')

.tooltip('hide')

Hides an element’s tooltip. Returns to the caller before the tooltip has actually been hidden (i.e. before the hidden.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip.

$('#element').tooltip('hide')

.tooltip('toggle')

Toggles an element’s tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the shown.bs.tooltip or hidden.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip.

$('#element').tooltip('toggle')

.tooltip('dispose')

Hides and destroys an element’s tooltip. Tooltips that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

$('#element').tooltip('dispose')

Tooltip Events

That’s all the code you need, folks. Hope it helps you design amazing things. 

Now that you have the power, use it wisely.

Consider these 5 simple rules when adding tooltips:

1. Consider each tooltip as friction — you are asking your users to read something — so make sure they get immediate value from that info
2. Explain only things that are not discernible from the interface/design
3. Make tips as contextual as possible — trigger them based on user actions and show them to the most receptive group of users
4. Show one at a time and don’t show more than 3–4 in a row. Users get fatigued quickly and need time to act on / digest what you have taught
5. As with everything else, analyze and test them!

Source: https://blog.prototypr.io/why-tooltips-are-terrible-and-why-you-should-use-them-for-your-product-98b66ba6b038

Tooltips Best Practice

• Open via Click and not Hover

Sometimes you see a design that has the tooltip automatically open upon mouse hover. The problem with this is that it doesn’t port over well to the other channels in a full cross-channel experience. Try hovering your finger on an iPad, or PS3 Sony browser. Not much will happen.

• Limit Usage

Just like with any screen element, too many of these little “helpful” info tips can result in them NOT being helpful. Consider this… Every data element on screen competes for the user’s attention with every other data element on the screen.

• Use Standard Icons

• Don’t prioritize Tooltips

The very purpose of the tooltip is to get on-screen help out of the visible parts and placed into a tiny little hiding compartment so that when users get into a bind, they have a place to go to get the info they need. Tooltips should be used to simplify the screen so that the main call to action can be louder and prouder!

• Make tooltips fully visible when opened

One of the beautiful things about a tooltip is that it can help save space anywhere on the screen. This means that there is a high probability that the tooltip will appear in obscure areas on various designs. When you are putting tooltips together, remember that when a user clicks the tooltip, they will likely expect the tooltip to appear in their visible window no matter where the scroll bar is set. A modal popup that centers the tooltip is probably the most elegant, versatile implementation that I’ve seen.

• Keep information short and sweet

When a user clicks the info tip, chances are they are not expecting a book to pop up on screen. If that level of information is needed in order to help them 1) there is a good chance you need someone to proofread the work, 2) the process is too complex, 3) It may be information that is going to best serve the user if it had its own section on the site.

Source: http://uxfindings.blogspot.ro/2014/08/tooltip-best-practices.html

Conclusion

I hope this tutorial will help you create amazing work. We have covered the code for Bootstrap tooltips and some useful principles and best practice when creating them. Happy coding 🙂

Sharing is caring!