272

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?

7 Answers 7

541

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...

Get or Set an element's title property without jQuery

Since title is a public property, you can set it on any DOM element that supports it with plain JavaScript:

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:

Get or Set an element's title property 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:

Get or Set an element's title attribute 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.

6
  • 6
    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
    Commented Oct 2, 2013 at 21:44
  • @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!
    – Cᴏʀʏ
    Commented Oct 2, 2013 at 22:38
  • @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
    Commented Oct 3, 2013 at 13:29
  • @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.
    – Cᴏʀʏ
    Commented Oct 3, 2013 at 14:38
  • @Cory What if I want to set the title attribute with not just a string but as a div? For eg: $("#ele").title = ${"#menu") where <div id="menu"> <a href="www.website.com">Link></a></div>
    – Infant Dev
    Commented Oct 11, 2013 at 6:48
33

In jquery ui modal dialogs you need to use this construct:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );
5
  • 3
    Lifesaver!! When using the voted answer above, the title is changed once, then the title does not change thereafter UNLESS you use the title option within the dialog!! THANKS SOOOOOOO MUCH!
    – Ryan Ellis
    Commented Aug 31, 2013 at 16:42
  • I'm glad I read the comments ;-) If you need to change the title several time, you have to set it in the dialog options.
    – Michel
    Commented Jul 2, 2014 at 10:02
  • Never would have thought this would be accepted that many times. I am very glad that it helped :-)
    – Igor L.
    Commented Mar 26, 2015 at 9:16
  • Thanks a lot for this. Just wanted to add you have to initialize the dialog the usual way first, then use this line of code. Wasn't clear to me, so hope it will help others.
    – Countzero
    Commented Oct 17, 2020 at 14:58
  • Yep, this is the situation I had also, and the other solutions did not work.
    – Michael K
    Commented Oct 23, 2023 at 15:45
22

I believe

$("#myElement").attr("title", "new title value")

or

$("#myElement").prop("title", "new title value")

should do the trick...

I think you can find all the core functions in the jQuery Docs, although I hate the formatting.

7

Another option, if you prefer, would be to get the DOM element from the jQuery object and use standard DOM accessors on it:

$("#myElement")[0].title = "new title value";

The "jQuery way", as mentioned by others, is to use the attr() method. See the API documentation for attr() here.

2

If you are creating a div and trying to add a title to it.

Try

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');
0
jqueryTitle({
    title: 'New Title'
});

for first title:

jqueryTitle('destroy');

https://github.com/ertaserdi/jQuery-Title

4
  • 1
    This problem can be solved by using the jquery library itself. You should only refer to using 3rd-party libraries when the OP mentions it, or it can't be accomplished without using a 3rd-party library.
    – Avishek
    Commented Apr 16, 2015 at 13:05
  • Yes, but there are other features. Simple but nice solution... You can examine... Commented Apr 16, 2015 at 13:25
  • 1
    there would be an http transport overhead of the 3rd-party library, which can be avoided using stock/native methods.
    – Avishek
    Commented Apr 17, 2015 at 8:25
  • 1
    plus, there is already a broadly accepted answer which is more efficient.
    – Avishek
    Commented Apr 17, 2015 at 8:27
0

As an addition to @Cᴏʀʏ answer, make sure the title of the tooltip has not already been set manually in the HTML element. In my case, the span class for the tooltip already had a fixed tittle text, because of this my JQuery function $('[data-toggle="tooltip"]').prop('title', 'your new title'); did not work.

When I removed the title attribute in the HTML span class, the jQuery was working.

So:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>

Should becode:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>

Not the answer you're looking for? Browse other questions tagged or ask your own question.