Does the content property exist in html

Question

Below is some html I found in this jquery tooltip tutorial, the contents inside of content"" show up in the tooltip using javascript. I have never seen the content propert befre, I search on W3schools.com but and google but could not find anything about it. Is this a valid property?

<a href="#" alt="Image Tooltip" rel="tooltip" content="<span>Image Title</span><br/> <img src='http://papermashup.com/demos/jquery-gallery/images/t2.png' width='120' height='120' class='tooltip-image'/> This is an example of an image tooltip with jquery, with a little bit of text.<br/> Remember you can follow me on twitter just search: ashleyford">Image Tooltip</a>

sorry If I am overlooking this, I searched but just briefly, didn't look too much before asking this.

Answer 1

Based on my initial searches on w3c, it seems that there is not such attribute "content" for a tag. The "content" attribute is for meta tag only. For tooltips you would use the "title" attribute. Also, I don't think html is allowed in a title attribute.

<a href="#" alt="Image Tooltip" title="This will shows up as tooltip.">Image Tooltip</a>

Answer 2

This is most likely a custom attribute that the jQuery tooltip creators made up to hold the text for the tooltip. This is unfortunately a common practice with many jQuery plugins (although most put stuff like this in the rel="" attribute instead).

The downside of this is that if you are concerned with validatiing your HTML, this will cause that to fail.

The upside is that browsers will ignore attributes that they do not expect, so it will not affect the rendering of the page.

The proper place for this would be the title="" attribute, but without the extra HTML markup in the value (<span> in this case).

If you must have the extra markup, be sure to encode it:

title=">span<Image Title</span&gt"

But, be aware that if the Javascript fails, the user will see this encoded text as the built-in, browser-rendered tooltip.

Answer 3

If you need to put custom attributes into an element, then use the html5 data- attributes.

Shamelessly copied from John Resig:

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

Answer 4

The content attribute doesn't exist. For tooltips you can use the title attribute (which works on alot of tags).

I thinks some browsers also use the alt attribute for tooltips on img tags, but this isn't the intended purpose of alt.