HTML <picture> title

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

Example

#

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

Vincent Van Gogh
<picture title="Portrait of Vincent Van Gogh">
  <source media="(max-width: 520px)" srcset="/img/html/vangogh-sm.jpg">
  <source media="(max-width: 768px)" srcset="/img/html/vangogh.jpg">
  <img src="/img/html/vangogh-lg.jpg" alt="Vincent Van Gogh">
</picture>

Code explanation

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

The value can be any string. Hover over the picture and after a second or so a tooltip appears.


Using title

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

The title value displays as a tooltip.

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


Syntax

<picture 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
38.0 Oct 2014
Firefox
38.0 May 2015
IE/Edge
13.0 Nov 2015
Opera
25.0 Oct 2014
Safari
9.1 Mar 2016

You may also like

 Back to <picture>
Guides