HTML tooltips are a great way to display extra information to your website visitors. They provide a short description of an element without having to open a new window, which could be disruptive to the user experience.
Tooltips are an important part of SaaS products as they allow you to provide relevant details about different software features without having users open up every single page and explore it manually.
In this article we’ll go over the specifics of HTML tooltips, why they are a must-have for businesses, and how you can create them without any code at all!
An HTML tooltip displays an inline message when you hover over a link, an image, or any other HTML elements. This message tells the user what the element is and where it leads. Helping users understand their destination before they click improves the overall experience on the page.
Including short information about elements on a site with HTML, tooltips can also make the interaction better and, as a result, boost user engagement. They are important for business across all industries, especially for eCommerce and SaaS companies.
Did you know that it costs up to 7 times more to acquire a new customer than to retain an existing one?
As a matter of fact, a study by Markingblog.com showed that:
- The probability of selling to a customer you already have is 60% to 70%, while the chances of selling to a new prospect are somewhere between 5% to 20%
- A 5% rise in customer retention can increase profits by 25% to 95%
Focusing efforts on retention looks like the smart thing to do,
doesn’t it?
But why are customers so unloyal?
A study conducted in 2021 by Percursive found that,
“Poor onboarding was the third most important reason for Saas subscription cancellations, right after the wrong product fit and lack of engagement”
The user experience is crucial – providing an easy understanding of the features and benefits of the product should be a priority.
This is true for any kind of website but especially for SaaS products, as self-explanatory software can accelerate adoption and reduce churn rate, among other benefits.
Benefits of using HTML tooltips for your business
Tooltips are a form of micro-copy and are very useful for businesses to help people understand better and faster what the product can do.
Adding tooltips to your website can help:
- Accelerate user activation and increment retention: When people see tooltips on your product, they are more likely to continue using it. Including tooltips that provide context makes the onboarding experience more accessible and boosts engagement.
- Enhance the user experience: HTML tooltips provide useful information about each feature without having to leave the page. This makes the experience with the software simpler and more enjoyable.
- Improve interaction: HTML tooltips allow you to point out the many features of your product and provide clarifications exactly when needed. Including onboarding guides, automated support, or step-by-step walkthroughs makes interaction smoother and improves the user journey.
- Reduce support requests: Automated support can save tons of money in customer service by reducing incoming calls.
Let’s now dive into how to add tooltips with HTML. Just a heads up – coding knowledge is needed!
How to create tooltips with HTML?
To build tooltips with HTML, you need to follow these steps:
Step 1.
Create an HTML tag element that will trigger the tooltip when moused over. In the case below the tooltip will be added to an h1 tag (<h1>Hover me!</h1>) but it could be any kind of HTML elements such as an image tag, a link tag, or an icon (for instance, an arrow).
Step 2.
Assign a title attribute to the element which will equal the text of the tooltip. In the case below, we will add a tooltip with the text “I am a tooltip” to the h1 “Hover me!”.
Step 3.
Finally, save.
Step 4.
Pass your mouse pointer over your tooltip element — the tooltip bubble will appear!
Of course, we just covered the basics – pure HTML. You can also apply CSS to the elements to determine position, visibility (eg: hidden), and other style characteristics (padding, border color, color scheme) or even add animations using javascript. But we don´t want to bore you with too many technicalities.
The thing is adding tooltips could be a little more complicated than it looks. And there are also many challenges you will have to consider.
Challenges with HTML tooltips
Tooltips are a great way to provide relevant information about your website’s content or application, but they do have a few drawbacks:
Challenge #1: Tooltips are not visible if the user doesn’t hover over them
One challenge with HTML tooltips is that they are not always visible to users. If a user does not hover on a tooltip, it will not appear. This can be frustrating, as people may not know how to access the information they need.
This can also cause problems if you have multiple tooltips on one page since it will be difficult for users to find each of them.
Solution: Use visible buttons and tooltips that show automatically.
Challenge #2: Tooltips can obscure the screen
Tooltips also obscure the screen while they’re open, which makes it hard for users to interact with other elements on the page while the tooltip is displaying and obscuring their view of those elements – which can be especially problematic for mobile devices.
Solution: Avoid using tooltips for content you don’t want people to miss. Still, there are cases when clarifications are needed, and tooltips are great for this.
Challenge #3: Tooltips can be intrusive
Tooltips can be perceived as intrusive as they force users to stop what they’re doing and read them before they can continue navigating through your web page or app.
Also, if you put a tooltip over something that needs to be clicked on (like a button), then the user won’t be able to access that button until they’ve clicked off of the tooltip.
Solution: Always use tooltips carefully. Do not abuse them and ensure they don´t cover important elements.
How to make a tooltip with Eyelet (+ examples)
If you are not a coder, you will love Eyelet.io!
This easy-to-use customer support tool allows you to build interactive, embeddable guides and contextual support without touching a line of code.
Get started with Eyelet in just three steps:
1. Install the extension.
Signup for free and install the Chrome extension – just updated to Eyelet 2.0. Our browser extension also works on Opera and Microsoft Edge.
2. Create a product tour.
Click on the New Tour button in the top right corner. It will take you to your app or website.
3. Open the Eyelet widget.
Click on the plus button that appears in the top right corner – this is the Eyelet extension you just installed.
4. Choose a tooltip element.
Select Tooltip and press + Attach tooltip
5. Attach the tooltip.
Click on the screen to attach the tooltip
6. Customize the tooltip.
Choose a tooltip from the templates and change its content. Give it a title, write the tooltip text, and add a GIF, image, or video. Add visual effects such as background color, border style, border width, border radius, and text-align, if you like. You can also edit the button CTA and enable a skip button. Finally, position the tooltip wherever you want.
7. Save.
Click on finish and save your product tour, or add other elements to the guide before you do so. You will be redirected to your app.
8. Trigger and test the product tour.
Go to your dashboard and select the product tour you just created. Click on Edit Tour and define the logic for the trigger. Choose automatically if you want your tooltip to display every time.
9. Track the performance of your product tour.
Finally, don´t forget to track the performance. Product tours are not static. The user journey changes, new features come up, and what you once solved with a speech bubble may now not be enough. Constantly checking your analytics dashboard can help understand how to further improve your user experience.
With Eyelet.io you can easily create onboarding guides with tooltips that look like this:
Source: MailChimp
Related:
Conclusion
Tooltips are a great way of adding context to your products and, as a result, can make the onboarding experience easier, accelerating product adoption, engagement, and retention. Adding short descriptions to software elements helps walk users through important features and understand what they can expect from the tool, what to do next and how to do it.
If you are not a programmer, the good news is Eyelet.io allows you to add interactive elements to your website or app without writing any code.
These are some of the valuable things you can do with Eyelet:
- Build interactive onboarding guides
- Automate support with a contextual support guide
- Create step-by-step walkthroughs
Try it now! Make use of our free 14-day trial – no credit card required!
FAQ
How do you add a tooltip in HTML?
Follow these steps to create an HTML tooltip:
- Create an HTML tag element that will trigger the tooltip when the user mouses over.
- Assign a title attribute to the element which will equal the text of the tooltip.
- Save.
- Mouse over your [tooltip] element — the title will appear!
If this sounds too complicated, try Eyelet.io and create tooltips without writing any code.
What does the tooltip do in HTML?
A tooltip is a UI element that displays additional information in the form of text when the user hovers over an element. In HTML code, it is added as a title attribute to an element such as an image, icon, link, or text element.
How do I create a tooltip for my website?
If you have HTML knowledge, add a title attribute to the element which will equal the text of the tooltip. If you want a simpler solution, try Eyelet.io which allows you to create interactive embeddable elements without touching a line of code.
What is a tooltip – give an example.
A tooltip is a short description that displays additional information about an element of a page when hovered over. They can be used solely or as a part of a product tour, to create an interactive user experience such as:
- interactive onboarding guides
- contextual support guides
- step-by-step walkthroughs
