Laptop with bootstrap tooltip

[Tutorial] How to Use the Bootstrap Tooltip

If you are just starting to learn Bootstrap, we have created a series of tutorials called 14 Days of Bootstrap 4 that can help you.

 

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:

 

Bootstrap Tooltip

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.

Bootstrap Tooltip Animation

 

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>

Step 2 – Trigger the Tooltips

 

Tooltips can be triggered via JavaScript — just call the tooltip() Bootstrap method with the id, class or any CSS selector of the target element in your JavaScript code.

You can either initialize tooltips individually or all in one go. The following jQuery code will initialize all tooltips on a page by selecting them by their data-toggle attribute.

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

 

Name Type Default Description
animation boolean true Apply a CSS fade transition to the tooltip
container string | false false Appends the tooltip to a specific element. Example:container: 'body' This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element – which will prevent the tooltip from floating away from the triggering element during a window resize.
delay number | object 0 Delay showing and hiding the tooltip (ms) – does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { "show": 500, "hide": 100 }

html boolean false Insert HTML into the tooltip. If false, jQuery’s text method will be used to insert content into the DOM. Use text if you’re worried about XSS attacks.
placement string | function ‘top’ How to position the tooltip – top | bottom | left | right | auto.
When “auto” is specified, it will dynamically reorient the tooltip. For example, if placement is “auto left”, the tooltip will display to the left when possible, otherwise, it will display right.When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. This context is set to the tooltip instance.
selector string false If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
template string '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' Base HTML to use when creating the tooltip.

The tooltips title will be injected into the.tooltip-inner

.tooltip-arrow will become the tooltip’s arrow.

The outermost wrapper element should have the class.tooltip.

title string | element | function Default title value if title attribute isn’t present.

If a function is given, it will be called with its reference this set to the element that the tooltip is attached to.

trigger string ‘hover focus’ How tooltip is triggered – click | hover | focus | manual. You may pass multiple triggers; separate them with space. `manual` cannot be combined with any other trigger.
constraints Array [] An array of constraints – passed through to Tether. For more information refer to Tether’s constraint docs.
offsets string ‘0 0’ Offset of the popover relative to its target. For more information refer to Tether’s offset docs.

 

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

 

Event Description
show.bs.tooltip Occurs when the tooltip is about to be show
shown.bs.tooltip Occurs when the tooltip is fully shown (after CSS transitions have completed)
hide.bs.tooltip Occurs when the tooltip is about to be hidden
hidden.bs.tooltip Occurs when the tooltip is fully hidden (after CSS transitions have completed)

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
Just to clarify a bit. Most common would be an “i” in a circle which stands for “information”, or a question mark (“?”) in a circle indicating that there is additional help information available.
  • 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!

Pavel Malos

Creating Digital Experiences @ BootstrapBay