How to add a tooltip to a Button in HTML

When comes to providing a user with insight, context is everything. Navigating through an interface should be a clearly defined process. The user should always know where they are going. They should also know where their clicking actions will bring them.

A tooltip provides an extra layer of context that we can provide to the user. They are typically displayed upon hover of a UI element. They serve to present concise information about the purpose of an element.

So, how can you add a tooltip to a button in HTML? To add a tooltip to a button you can use the title attribute on the button element. This will create a tooltip when the user hovers over the button element.

This is demonstrated in the following snippet:

<button title="Hello World!">Sample Button</button>

And it’s really as simple as that, be sure to leverage the use of tooltips to provides better context for your users.

Gareth Dunne

Senior JavaScript Engineer and creator of JSdiaries. Passionate about the latest in web technologies and how it can provide value for my clients.