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
- 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.
- Zero-length text display will never be displayed.
- You have to opt-in / mouse-over / initialize for the tooltip to be displayed. This is great for performance reasons.
- Tooltips will not work on hidden elements.
- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use
white-space: nowrap;on your
<a>to avoid this behavior.
- Tooltips for
disabledelements 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
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
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.
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>
|animation||boolean||true||Apply a CSS fade transition to the tooltip|
|container||string | false||false||Appends the tooltip to a specific element. Example:
|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:
|html||boolean||false||Insert HTML into the tooltip. If false, jQuery’s
|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.
|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.|
||Base HTML to use when creating the tooltip.
The outermost wrapper element should have the class
|title||string | element | function||”||Default title value if
If a function is given, it will be called with its reference
|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.|
Attaches a tooltip handler to an element collection.
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.
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.
Toggles an element’s tooltip. Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the
hidden.bs.tooltip event occurs). This is considered a “manual” triggering of the tooltip.
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.
|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:
- Consider each tooltip as friction — you are asking your users to read something — so make sure they get immediate value from that info
- Explain only things that are not discernible from the interface/design
- Make tips as contextual as possible — trigger them based on user actions and show them to the most receptive group of users
- 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
- As with everything else, analyze and test them!
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.
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 🙂