HTML title Attribute

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.

Example

#

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.">

Using title

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.


Syntax

<tag title="value" />

Values

#

Value Description
value String value, possibly with line-feed characters for multi-line display (see below).

Multi-line tooltips

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,&#10;Paul Cézanne,&#10;1898, Oil on Canvas." >

Did you know?

Did you know?

The title attribute is inherited

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>

Elements using the title attribute

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

Browser support

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

You may also like



Guides