How to apply style to the 'title' attribute of the 'td' tag

Question

I have the following code with me and you want to customize the title attribute style. Is there any way to do this. Thanks in advance.

<td title="Sample Title">test</td> 

Answer 1

Not directly.

You can do it with

• JavaScript code: see here

• library: see here

• a small workaround with CSS see here

Answer 2

It may not have been possible many years ago, but now yes, you can style the Title attribute, see here . This should work in IE7 +, Safari 3+, Firefox 2.0.0+.

Some individual styles and layouts may be required to fit your own design.

Just to make sure this link doesn't work, the code in this article is suggested for styling the title attribute:

 <div title="Tooltip text for first div"></div> <div title="Tooltip text for second div"></div> div:before{ content:attr(title); display:none; } div:hover::before{ width:200px; display:block; background:yellow; border:1px solid black; padding:8px; margin:25px 0 0 10px; } div:hover{ z-index:10; position:relative; } 

Answer 3

In short, you cannot create a title attribute. To the browser, how the title will be displayed when displayed.

However, jQuery provides javascript alternatives that should give you the solution you are after:

http://jquery.bassistance.de/tooltip/demo/

Answer 4

Not. Different browsers display the tooltip differently and there is no way to style it with css. If you need to style it, you need to look for an alternative, for example, jQuery to display custom tooltips .

Answer 5

The title attribute is supported by the browser, usually as a tooltip. There is no standard way with CSS to format this popup.

I would suggest that if you have a requirement for a specially formatted tooltip, you use the onmouseover () attribute and generate the popup yourself. As others have pointed out, you can use jQuery if you want to add support for this code. For an easier solution than jQuery, see SkinnyTip

Answer 6

This will not match TD, but it is a quick fix, which may be what you are looking for:

 <td><a title="Sample Title">test</A></td> 

Try it (hover over the word "test" below):

test