In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > title (a, abbr, acronym, ...)

title property (a, abbr, acronym, ...)

Browser support:

Specifies or returns a tooltip for an element.

A tooltip is displayed when the user moves the mouse pointer over the element.

Note that in Internet Explorer, if the title property is not specified, the value of the alt property is displayed both as a tooltip and an alternate text. In other browsers, the alt property does not specifies a tooltip only an alternate text.

Syntax:

object.title;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: title

Possible values:

String that sets or retrieves the text of the tooltip.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the title attribute:

<a id="myAnchor" title="tooltip">
    Move the mouse pointer over this text!
</a>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of both the alt and title attributes:

<div style="color:red">
    <img src="notexisting.gif" alt="Sorry, the image is not available!" title="This is my first image" />
    <br /><br />
    <img src="picture.gif" alt="Sorry, the image is not available!" title="This is my last image" />
</div>
<br /><br />
Move the mouse pointer over the images to see the tooltips!

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the title property:

<head>
    <script type="text/javascript">
        function ChangeTitle () {
            var anchor = document.getElementById ("myAnchor");
            var input = document.getElementById ("myInput");
            anchor.title = input.value;
        }
    </script>
</head>
<body>
    <a id="myAnchor" title="tooltip">
        Move the mouse pointer over this text!
    </a>
    <br /><br />

    <input id="myInput" type="text" value="The new tooltip" />
    <button onclick="ChangeTitle ();">Change the tooltip!</button>
</body>