12 (Unbelievably) Good Tooltip Examples and Best Practices
User Onboarding

12 (Unbelievably) Good Tooltip Examples and Best Practices

TABLE OF CONTENTS
    #1 product adoption platform. Quick setup, lasting engagement.
    Start for free >
    See how UserGuiding can help you level up your product experience.
    Talk to an expert >
    #1 product adoption platform. Quick setup, lasting engagement.
    Join 20k+ product people >
    Introducing;

    UserGuiding
    AI Assistant
    Live Webinar
    December 12th,
    @ 3:00 PM GMT
    REGISTER NOW
    TABLE OF CONTENTS

    Home / User Onboarding / 12 (Unbelievably) Good Tooltip Examples and Best Practices

    Talking about the Mona Lisa without having seen the Mona Lisa is difficult and absurd.

    Likewise, talking about tooltip content without showing any tooltip content would be a big mistake.

    In my previous article, I talked about what a tooltip is and how to make effective tooltips.  

    I wanted to visualize what it should look and act like this time.

    For further reference, this is how I expect you to react after reading the article:

    tooltip meme gif

    We'll see.

    TL;DR

    • When creating your tooltip, use a color that pops against the background of your app
    • Don't position your tooltips in such a way that they obscure important content behind them
    • Prioritize interactive tooltips that trigger when you mouse over them over static ones
    • Keep the copy used in writing your tooltips as concise as possible
    • Focus the copy on the benefits of the feature, instead of the feature itself
    • Keep images in your tooltips to an absolute minimum
    • You can code tooltips with HTML and CSS, but doing so is time-consuming and expensive
    • As an alternative, you can use a tool like UserGuiding to create tooltips without having to mess around with code

    How to write consistently good Tooltips - 6 best practices

    When you look at successful people, you will find that they aren't the people who are motivated, but have consistency in their motivation.
    - Arsene Wenger

    1- Use good colors that stand out

    If I had to pick only three best practices for the best tooltip design, this would be one of them.

    The color scheme and the shape of a custom tooltip catch the users' eye first.

    Here's what I mean:

    good tooltip example
    bad tooltip example

    Which tooltip looks more friendly?

    The purple one is easier to read and seems more professional even though the shape of the two tooltips is the same.

    Did you also realize that the black tooltip is blocking some information? That's also a big no-no. Here's why:

    2- The placing is important

    This is the second of the most important three practices.

    Would you put a traffic sign in the middle of the road?

    No.

    Should you place a tooltip in such a way that it blocks other information?

    No!

    The placing of tooltips can make or break your product, especially for touch devices such as tablets or mobile devices.

    Let me show you an good tooltip example:

    tooltip bad UX example
    image source: weloveuxd

    If there wasn't a bigger space to click on, I would have stopped using Twitter the second I saw this.

    Sometimes, it's impossible to click on other interactive elements than the tooltip when one is on the screen.

    A tooltip is not meant to be a full-screen message. Instead, it's supposed to be a pointer-hover-triggered button type.

    And I've seen even worse cases.

    That's not fun. It should be fun.

    3- Make it fun

    How do you turn a simple tooltip into an effective one?

    Make it interactive.

    There are two types of tooltips:

    1. On-screen tooltips that don't disappear

    2. Mouse-pointer-triggered modern tooltips.

    If you already have a lot of screen elements, make sure that the tooltip doesn't make it even more crowded.

    Remember Clippy? The annoying Microsoft assistant that communicated through tooltips?

    Assistive technology has improved a lot since it appeared. It doesn't have to be annoying anymore.

    Effective tooltips should be fun. A fun element might not be fun for everyone. Those people shouldn't churn just because you misused a tooltip button.

    4- Use short sentences

    The fact that you should keep the tooltip content short is an obvious one.

    The tooltip should be small and not cause friction in the user journey.

    To do that, you should use short sentences, be clear, and get straight to the point.

    What's more important than the length is:

    5- Talk about value rather than function

    I mentioned that the color scheme and placing are among the top three best practices of user experience-friendly tooltips, right?

    This is the third.

    There is already a character limit on how long you can make your tooltip message, so why waste it on the obvious?

    Here's an example:

    what is a tooltip

    This tooltip wouldn't be as effective if it looked like this:

    not good tooltip example

    I hope that you get what I mean.

    Also, did you notice how the emoji in the first image makes it seem more fun and friendly?

    Still:

    6- Visuals are not meant for all tooltips

    Some tooltips contain emojis; some onboarding tooltips even contain images.

    youtube tooltip example

    The image makes the instructions more evident in this example.

    But if there were an image in a hotspot tooltip*, it would only be an annoying tooltip button.

    (*: hotspot tooltips should include a maximum of two sentences and shouldn't include images)

    I believe it's time that we get to the examples to see all those best practices in action.

    12 Examples of Great Tooltips created with CSS, HTML, or No-Code

    I tried to cover a wide range of different individual tooltips to inspire you as much as possible.

    These products have mastered the User Interface game, from app messages to custom components.

    I've also categorized the examples according to how they were created, in case you are looking for alternative methods.

    So let's start with the first and most popular method, shall we?

    No-Code Tooltip Examples

    Here I will list some of the best examples of tooltips that others created with 3rd party tools. You should definitely check them all out if you don't have any coding experience, and want to learn how to avoid common mistakes.

    1- UserGuiding

    If you know, you know. UserGuiding is a tool that helps you build no-code tooltips and other user engagement elements.

    examples of tooltips

    If you are a tool to build tooltips, your tooltips have to be perfect.

    Right?

    Good thing that UserGuiding understood the assignment.

    Why is this a good example?

    • The text focuses on the value, not the action
    • The design is simple
    • The placement doesn't block any necessary information
    • The tooltip has interactive elements 

    2- Zakeke

    Zakeke is a product personalization tool, helping its users create 2D and 3D personalized products.

    zakeke onboarding tooltip

    They used a hover-activated tooltip to ensure that users are following all the necessary steps. In their case, the tooltip acts as a necessary guide and not an additional tool.

    Why is this a good example?

    • The tooltip doesn't block any information on the screen
    • The text is written in clear language, emphasizing the actions to take
    • The tooltip can be disabled not to be disturbed every time by the blinking hotspot.
    • The design matches the website.

    3- Genially

    Genially is a design platform where you can create interactive content of all kinds.

    genially tooltip

    The tool has a vast amount of use cases and templates.

    In other words, it isn't effortless.

    That's why onboarding new users with interactive tooltips is the best choice.

    In their case, it's normal that the tooltip is bigger than usual. This is because the first steps of onboarding tooltips should usually be bigger to keep the users from getting distracted by the number of different options.

    Why is this a good example?

    • The tooltip is clear and has visual elements
    • The tooltip has interactive elements
    • The size of the tooltip matches the use case
    • The design matches the tool

    4- Cuepath

    Cuepath is a medication monitoring tool, based in Canada.

    cuepath tooltip

    Cuepath has both onboarding tooltips and hotspot tooltips, but I wanted to focus on the latter.

    That's because the only function of this tooltip is to draw attention.

    The tooltip doesn't inform about anything, nor is it a mandatory design element.

    Yet, it's a smart way to quickly direct the attention of the scanners (people) to the sign-up form.

    Why is this a good example?

    • It's an excellent place to use a tooltip
    • The tooltip highlights the value and not the function
    • The tooltip draws attention to itself

    5- GhostwriterAI

    GhostwriterAI is an artificial intelligence tool that helps marketers identify their target audience.

    tooltips in walkthrough gif

    GhostwriterAI has many features, and all those features have more than one function.

    Also, they have a complex UI. Therefore, they need to specify which feature they are talking about while onboarding new users.

    Just like Genially, they figured that onboarding new users through tooltips was the best way to ensure that.

    And they did a good job, considering that they now spend %63 less time to onboard their new users.

    Why is this a good example?

    • The tooltip is clear and has visual elements
    • The tooltip has interactive elements
    • The size of the tooltip matches the use case
    • The design matches the tool

    6- BeerOrCoffee

    BeerOrCoffe is a platform for companies and people to find the best co-working space for them.

    Since BeerOrCoffee is a new tool that is improving, they constantly have to announce new features and updates.

    So instead of bothering their users with big modals every single time they open the tool, they decided to automate the process with tooltips.

    Why is this a good example?

    • All the tooltips have short texts
    • The use case of the tooltips is smart
    • The tooltips don't block any necessary information
    • The design matches the tool

    7- Plandisc

    Plandisc is a calendar tool that helps you organize your whole year on a circular calendar.

    hotspot tooltip

    They chose to embed the tooltip into a blinking hotspot. This way, the tooltip doesn't cover a lot of space on the screen, and doesn't bother the users that don't like tooltips.

    Why is this a good example?

    • The text on the tooltip is short and simple
    • The message focuses on the value
    • The tooltip is placed correctly
    • The tooltip has interactive elements
    • The color of the tooltip matches the style of the tool.

    HTML and CSS Tooltip examples

    Here I will list some of the most inspiring tooltip examples created with HTML or CSS. I will also include the sources, just in case, for you to adopt them. 

    8- Map pointer tooltip

    tooltips example

    I wanted to start the list with my favorite CSS tooltip. Unlike other open-source tooltips, you can use JavaScript to integrate this one and customize it as you want. You can use the pointers in any context without disturbing the users' eyes.

    Why is this a good example?

    • The design is unique and simple
    • You can add images
    • Serves for a range of purposes that most users are accustomed to
    • Could replace long product tours

    Language: JavaScript, HTML, CSS

    Source: codepen.io/Animated Map Pins

    9- Animated tooltip

    animated tooltip

    Next on the list is a simple, yet eye-catching tooltip example. This funny little friend of ours makes its little dancey-dance to ensure users follow it. This tooltip is definitely not the best choice for product tour tooltips, but it can be better than plain hotspot tooltips.

    Why is this a good example?

    • The design is simple yet eye-catching
    • It can be great for announcements or highlights
    • It's customizable

    Language: HTML, CSS

    Source: codepen.io/Animated CSS Tooltip Concept

    10- Clickable element tooltip

    clickable tooltip example

    This ”icon click” tooltip has a lot more to offer than only giving information. You can use it as a checklist, a home button, and a built-in toolbox for your website, just like a navigation button on mobile phones.

    Why is this a good example?

    • It's an interactive element
    • The design is both simple and stylish
    • The size is not too big
    • It has a wide range of use cases

    Language: HTML, CSS

    Source: codepen.io/CSS Tooltip On Click

    11- CSS-only simple tooltip

    tooltip examples

    I had to include at least one regular tooltip example in this list, and here it is. Just change the colors, images, and text, and it will be ready to use on any website.

    Why is this a good example?

    • You can include images
    • The design is UX-friendly
    • It can match almost any website

    Language: HTML, CSS

    Source: codepen.io/CSS Only Tooltips

    12- Laser-effect tooltip

    laser effect tooltip

    This is one of the most fantastic tooltip designs I have ever seen. If your website has a minimalist design or wants to keep the tooltips as minimalist as possible, this CSS tooltip was made for you. However, this tooltip won't stand out as much as necessary if you have a complex UI with a multi-color palette.

    Why is this a good example?

    • The design is out of the ordinary
    • It's simple yet stylish
    • It's customizable

    Language: HTML, CSS

    Source: codepen.io/Tooltip Laser Line Effect

    Conclusion

    Tooltips are not hard to make - if you know how to create them easily.

    They are also not bad for UX - if you know how to use them correctly.

    Tooltips are not outdated – they're actually extremely helpful.

    If you want to create tooltips for your business that emulate the examples we shared in this blog post, you've basically got two options. You could create them yourself with HTML and CSS, but do you have the time and resources to do that at scale?

    Your other option is to use a tool like UserGuiding that will let you create tooltips in minutes, without having to code.

    Feel free to have a play around with UserGuiding without having to pay anything and see if it's a fit for you.

    Frequently Asked Questions

    What is a good tooltip?

    A good tooltip is radiant, well-designed, has a short text, and is placed correctly. To make the tooltips even better, you can also make them mouse hover-triggered, and interactive.

    Does Screen Reader read tooltips?

    Many tooltips are screen-reader-friendly, depending on how they were made. If you want to make the tooltips more accessible, find more information here.

    What can I use instead of tooltips?

    You can use modals, hotspots, and in-app messages to replace tooltips. However, sometimes that won't be as simple and effective as tooltips.

    How long should tooltips be?

    A tooltip text should be short, no longer than 140 characters. However, the length of the text can also depend on the positioning of the tooltip.

    1,000+ Teams Scaling Successfully
    with UserGuiding’s Best Value Platform

    Join them — Take the first step toward growth;
    start your free trial today with confidence.