I have an form input element and want to change its title attribute. This has to be easy as pie, but for some reason I cannot find how to do this. How is this done, and where and how should I be searching on how to do this?
Before we write any code, let's discuss the difference between attributes and properties. Attributes are the settings you apply to elements in your HTML markup; the browser then parses the markup and creates DOM objects of various types that contain properties initialized with the values of the attributes. On DOM objects, such as a simple
HTMLElement, you almost always want to be working with its properties, not its attributes collection.
The current best practice is to avoid working with attributes unless they are custom or there is no equivalent property to supplement it. Since
title does indeed exist as a read/write property on many
HTMLElements, we should take advantage of it.
With this in mind, let's manipulate that
titleproperty without jQuery
document.getElementById('yourElementId').title = 'your new title';
Retrieval is almost identical; nothing special here:
var elementTitle = document.getElementById('yourElementId').title;
This will be the fastest way of changing the title if you're an optimization nut, but since you wanted jQuery involved:
titleproperty with jQuery (v1.6+)
jQuery introduced a new method in v1.6 to get and set properties. To set the
title property on an element, use:
$('#yourElementId').prop('title', 'your new title');
If you'd like to retrieve the title, omit the second parameter and capture the return value:
var elementTitle = $('#yourElementId').prop('title');
Check out the
prop() API documentation for jQuery.
If you really don't want to use properties, or you're using a version of jQuery prior to v1.6, then you should read on:
titleattribute with jQuery (versions <1.6)
You can change the
title attribute with the following code:
$('#yourElementId').attr('title', 'your new title');
Or retrieve it with:
var elementTitle = $('#yourElementId').attr('title');
Check out the
attr() API documentation for jQuery.