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.
You can read more about the difference between attributes and properties here or here.
With this in mind, let's manipulate that title...
document.getElementById('yourElementId').title = 'your new title';
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:
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:
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:
You can change the title attribute with the following code:
$('#yourElementId').attr('title', 'your new title');
var elementTitle = $('#yourElementId').attr('title');
Thanks a ton! Very helpful
If this isn't a well constructed answer, none are. AND it is as accurate as it is well constructed. +1... (oh, and also your name is awesome, because it is mine :) even spelled the same!)
@VoidKing: I tend to revisit and make current answers that become popular (of which I only have a few). I try to provide everything that I would hope to find if I were researching or posting a question. I'm glad you found it!
@Cory Well, to be honest as I was looking for something else (it was a long shot, but was looking if there was any way to style the default HTML title box). I didn't find what I was looking for, but really admired the effort you put into this answer (you showed resources, pure .js and jQuery, etc.). Anyway, nice answer!
@VoidKing: This is probably the wrong place to answer, but if you're talking about the default tooltips that appear when you hover over items with alt or title attributes, then perhaps this answer will give you some insight.