How to set the title attribute of an element with not just a string?

Question

I want to set the title attribute of an element with some html. For eg:

<div id="element"></div>

$("#element").title = $("#menu");

where

<div id="menu"> 
   <a href="www.website.com">Link</a>
</div>

This does not render the menu in the title. Can this be done?

I'm not sure what you expect to happen, but I doubt it's possible. What you expect to happen? — recursive, Oct 11 '13 at 07:05
@recursive I want that whatever html I write in the menu div, should be rendered in the title — Infant Dev, Oct 11 '13 at 07:07
@infantDev The native `title` attribute/property is just for displaying plain text. If you want more control over the content and display, you'll probably have to look into using a custom "*tooltip*" -- another positioned element that appears on hover. Example: [jQuery UI](http://jqueryui.com/tooltip/). — Jonathan Lonowski, Oct 11 '13 at 07:09
@infantDev: Your use of `title` threw me off, because what you are trying to accomplish is not related to it. See my answer. — recursive, Oct 11 '13 at 07:10
@JonathanLonowski Actually I am using the tooltip from jquery ui, and the content of the tooltip is picked from the title property of the element. That is why I wanted to set the title property. — Infant Dev, Oct 11 '13 at 07:12

score 1 · Answer 1 · answered Oct 11 '13 at 07:07

1

Use attr() like

var title = $("#menu a:first").attr('href');
$("#element").attr('title',title);

Demo here

answered Oct 11 '13 at 07:07

Rohan Kumar

40,431
11
76
106

hmmm... quite alike mine, why attr instead of prop? – Sergio Oct 11 '13 at 07:08
@Sergio I think `title` is an `attribute` not `property` See http://api.jquery.com/attr/ and you will find **$( "#greatphoto" ).attr( "title", "Photo by Kelly Clark" );** – Rohan Kumar Oct 11 '13 at 07:10
@Rohan Actually I wanted a generic solution for any html I put on the menu div, it might contain more than a link – Infant Dev Oct 11 '13 at 07:24

score 1 · Answer 2 · answered Oct 11 '13 at 07:09

1

If you want to insert the html contents of one element into another, you can use this.

$("#element").html($("#menu").html());

BTW, this doesn't deal with title at all.

answered Oct 11 '13 at 07:09

recursive

83,943
34
151
241

But OP needs something different, not? – Rohan Kumar Oct 11 '13 at 07:19

score 0 · Answer 3 · answered Oct 11 '13 at 07:05

0

Try this:

var html_string = $("#menu a:first").prop('href');
$("#element").prop('title', html_string  );

answered Oct 11 '13 at 07:05

Sergio

28,539
11
85
132

marko · Answer 4 · 2013-10-11T07:15:08.793

0

You can set html inside an attribute, but it will not display as renderable html.

 $("#element").attr("title", $("#menu").text());

edited Oct 11 '13 at 07:15

answered Oct 11 '13 at 07:09

marko

10,684
17
71
92

score 0 · Answer 5 · answered Oct 11 '13 at 07:09

0

you can use

var val = "<p>This is my new title</p>"
document.getElementById('element').setAttribute("title",val);

answered Oct 11 '13 at 07:09

Voonic

4,667
3
27
58

Salman A · Accepted Answer · 2013-10-11T07:31:17.210

0

If I understand you correctly then NO, you cannot display HTML using the title attribute. Depending on what you are trying to do, you better find and use a jQuery tooltip or menu plugin. The jQuery UI library has both.

edited Oct 11 '13 at 07:31

answered Oct 11 '13 at 07:19

Salman A

262,204
82
430
521

How to set the title attribute of an element with not just a string?

6 Answers6