The title attribute on an HTML element adds a tooltip with title text to that element.
Hovering the mouse over the element will display the tooltip.
A title attribute on an <img> element.
Hover your mouse over the image to see the tooltip.
<img src="/img/html/cardplayers.jpg"
title="1890, The Card Players by Paul Cézanne.">
The title attribute provides additional information about an element.
The title value displays as a tooltip when the element is hovered.
Titles provide quick user tips, which are helpful for icons, links, images, and otherwise.
<tag title="value" />
| Value | Description |
|---|---|
| value | String value, possibly with line-feed characters for multi-line display (see below). |
To create a multi-line tooltip use a line feed character, i.e. &10;, in the title.
This image of a Cézanne painting displays a tooltip with multiple lines.
<img
src="/img/html/boy.jpg"
title="Boy in Red Vest, Paul Cézanne, 1898, Oil on Canvas." >
Nested elements inherit the title of the parent.
This can be overridden by assigning their own title.
To clear a title the nested element should set the title to "" (empty string).
The first paragraph inherits the title, and the second one overrides the title.
Hover to see the parent's tooltip.
Hover to see no tooltip.
<section title="Parent tooltip text">
<p style="background:aliceblue;padding:20px;border:1px solid gray;">
Hover to see the parent's tooltip.
</p>
<p title=""
style="background:aliceblue;padding:20px;border:1px solid gray;">
Hover to see no tooltip.
</p>
</section>
The title attribute is a global attribute that can be applied to any element.
Click on any tag for an example of that element using an title attribute.
| Tag with title | Description |
|---|---|
| <a> | Creates a link (hyperlink) to another page |
| <abbr> | Defines an abbreviation |
| <audio> | Creates a player for sound such as music, sound effects, or others |
| <blockquote> | Defines a section with text quoted from another source |
| <button> | Creates a clickable button that can contain text or an image |
| <canvas> | Creates a graphics container where JavaScript can draw. |
| <figure> | Displays self-contained content, usually an image |
| <iframe> | Creates a frame in which another web page can be embedded |
| <img> | Creates an image |
| <input> | Creates an input field in which data can be entered |
| <label> | Creates a label or brief description before input elements |
| <li> | Defines a list item. Used in <ol> and <ul> elements |
| <meter> | Creates a measurement control, like a guage |
| <picture> | Adds images with a bit more flexibility than the <img> element |
| <pre> | Displays pre-formatted text in fixed-width font -- usually computer code |
| <progress> | Creates a control that displays progress of a task |
| <span> | Container for one or more inline text elements |
| <svg> | Creates an vector image |
| <table> | Creates an HTML table with rows and colums, much like a spreadsheet |
| <td> | Creates an HTML table cell |
| <textarea> | Creates a multi-line text input control, for example for messages |
| <th> | Creates an HTML table header cell |
| <tr> | Creates a table row with either <th> or <td> elements |
| <video> | Creates a video player on a page |
Here is when title support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
