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.