Tooltips In Web Design: Trends, Examples & Free Plugins

There’s no better way to show extra info than with a tooltip. These little text boxes are incredibly simple to create and don’t take up much space on the page.

With modern CSS/JS you can restyle tooltips any way you like and get them to perfectly match your layout. But there are many different reasons to use tooltips and they all function differently based on the type of website.

In this guide I’ll cover various uses for modern tooltips using live examples to show how they look in the real world. Towards the end I’ve also curated some free tooltip plugins you can add into your site for accessible tooltips with just a few lines of code.

Extra Form Info

Complex form fields often come with strict requirements for new signups. These requirements might limit the length of a username or require a certain level of complexity for a new password.

Most of the time you’ll find these on signup pages but they can also appear during checkouts for larger ecommerce sites.

I like these tooltips in forms when they’re used appropriately. Otherwise they feel like a nuisance getting in the way. It’s your job as the designer to strike a balance.

Facebook uses small tooltips on error fields when you sign up with empty/missing values. These small tooltips let the user know which fields are missing data and what sort of data is expected.

What’s interesting is how these tooltips do not appear when you first select a field. But if you skip a field and move onto the next one you’ll notice the bright red exclamation mark which then displays a tooltip on hover.

I really like this technique although I wish it was applicable to the entire field right away. The tooltip is invaluable to new signups who aren’t sure what information is required.

Another example is the Mint signup page which does add those tooltips onto fields right from the start.

But they only appear on relevant fields so you won’t feel inundated with tooltips at every turn.

Use these tooltips on larger forms to keep the general interface clean. Users only need to see the tooltip info while filling out each field so it makes sense to display this while they’re focused on the field, then hide it once they move on.

Sometimes designers add tooltip-style features as part of the content. These features are not directly tied to the page but they do add a little bit extra to the layout.

For example Best Buy has this feature on their item page with a small info icon in the sidebar. If you click the small “i” you’ll get more information about the size, build, or structure of the product.

I distinguish this from other interface tooltips because the interface doesn’t hinge on this tooltip being active. Whether the user opens this tooltip or not they’ll still be able to navigate the information and purchase a product.

But that doesn’t mean it’s a useless addition!

This extra info really does help every potential customer. Look at this more like a bonus in-page feature along with the main content.

Another example can be seen on the Web Design Ledger blog when you select text within an article. They have a feature that lets you automatically share selected text on social networks like Twitter and Facebook.

Some readers may find this feature quite annoying but others who frequently post on social can find a lot of benefit in this technique.

A designer’s goal is to always minimize the annoyance of content consumption while also improving the functionality of the page. I think the TurboSquid gallery offers a much simpler example.

When you hover any render you’ll get a larger preview box floating alongside it. This takes the form of a tooltip but it offers much more dynamic content.

Not every site uses large graphics but I think this effect fits nicely with photo galleries and ecommerce product pages.

Clear Interface Tooltips

The strongest value of a tooltip is clarifying intent for a user interface. Sometimes designers use icons as placeholders for certain items, but these don’t mean anything unless the user is familiar with the interface.

Tooltips help to clarify the interface and the functionality of these smaller page items.

On the Google Music homepage you can hover all the different navigation features on the right-hand side. They help you jump to different artists and albums currently featured on the site.

But since they all use the same grey circle icon you really have no idea what these do. Thankfully tooltips come to the rescue to explain each circle in greater detail.

Another smaller yet interesting example can be found on the Apple checkout page.

The small heart icon is typically associated with saving an item. By adding this tooltip it removes all doubt in the user’s mind and clarifies intent.

A great user experience always clarifies the purpose of each item and how the interface works. This is crucial if you’re designing something from scratch so new users can learn how it works.

If you’re looking to add these tooltip effects into your site then you’ll want a great plugin.

Many developers release their code for free and you’d be crazy to build something from scratch. Thankfully all of these plugins are super easy to use and do not require much code to get working.

Tooltipster

The free jQuery plugin Tooltipster is a sweet place to start if you want broad support for simple tooltips. This plugin works for all major browsers including mobile browsers on touch/tap actions.

With Tooltipster you can change the tooltip’s color, size, placement, animation speed, total number of tooltips, and even callback methods once they appear/disappear.

If you know your way around jQuery then you’ll have a blast customizing this plugin. And it’s totally free so you can find all the documentation on GitHub.

Protip

Protip is one of the newer tooltip plugins with a ton of features. They support a live CDN link for the JavaScript and CSS files so you can include these externally in your files or in a cloud IDE like CodePen.

The main Protip landing page also has a customizer in the header. This lets you alter the animation, size, font type, color scheme, and other features dynamically right on the page.

Definitely a cool plugin and it’s one of the most feature-packed tooltips you’ll find.

Tipped

I’ve used Tipped.js in a bunch of my projects with great success. This is one of the simpler plugins out there and it comes with a beautiful design.

This works just like your average tooltip plugin with the small triangle icon popped up from wherever the tooltip should appear. This can hold basic text/images or it can include detailed HTML, embedded APIs, or even Ajax calls to the backend.

Other options let you hide the tooltip on click, add a small “X” icon to close, and to follow the mouse around the screen(among many other settings). Check it out if you want a simple design with a lot of functionality.

qTip 2

The qTip2 plugin is the 2nd incarnation of the original qTip plugin for jQuery. This newer version keeps the classic design along with some updated interface features.

This newer version supports things like Ajax calls and dynamic speech bubbles for hover/click events. You can also add a title onto the tooltip area and restyle the design however you like.

qTip2 has a sizable API along with a few intro guides for developers. It does get pretty detailed but if you can work through the code you’ll find a lot of value here.

Moving Forward

When used properly, tooltips offer a largely enhanced experience for the user. But knowing when to add these into your site is half the battle.

I hope this list offers plenty of inspiration for UI designers from all backgrounds. If you’re building a site with lots of interactive elements then adding a few well-placed tooltips can dramatically improve usability.

Featured image design by Seven.