Creating a Tooltip Using the title attribute
In this approach, we will use the title attribute in HTML that allows us to provide additional information about an element, which is typically displayed as a tooltip when the user hovers over the element with their mouse.
Syntax:
<element title="tooltip text">
Example 1: The below code uses the title attribute to create a tooltip in HTML.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Centered Content </title></head><body> <div style="text-align: center;"> <h1 style="color: green;"> w3wiki </h1> <h2> Adding tooltip to buttons </h2> <button title="Tooltip for submit button"> Submit </button> <button title="Tooltip for Reset button"> Reset </button> <button title="Tooltip for Cancel button"> Cancel </button> </div></body></html> |
Output:
What is a Tooltip in HTML ?
A tooltip in HTML is a small pop-up box or text that appears when a user hovers over an element such as a button, link, or image. Tooltips are often used to provide additional information about the element or to give context to the user.
We can create a tooltip using the below methods:
Table of Content
- Using the title attribute
- Using CSS hover effect
- Using pseudo-elements