HTML <progress> title Attribute

The title attribute on a <progress> tag adds a tooltip with title text to the progress bar. Hovering the mouse over the progress bar will display the tooltip.

Example

#

A title attribute on a <progress> tag.
Hover over the progress element to see the tooltip.

Calculating cost...

30%
<div>Calculating cost... </div>

<br />
<progress title="30% Complete" value="30" max="100"> 30% </progress>

Code explanation

The title attribute is placed in the <progress> opening tag.

The value can be any string.

Hover over the progress and after a second a tooltip appears.


Using title

The title attributes attaches additional information to the <progress> element.

The title value displays as a tooltip.

The tooltip displays when the <progress> element is hovered.


Syntax

<progress title="value">

Values

#

Value Description
value A string value. A title can span multiple lines by including newline or carriage-return characters:  &#10;  or  &#013;.

Browser support

Here is when title support started for each browser:

Chrome
8.0 Dec 2010
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
11.0 Dec 2010
Safari
6.0 Jul 2012

You may also like

 Back to <progress>
Guides