8

I have the following code with me, and would like to customize the style of the 'title' attribute. Is there any way to do it. Thanks in advance.

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

6 Answers 6

8

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

Some custom styling and positioning may be required to suite your own design.

Just to make sure this link does not go dead, the suggested code in this article to style the title attribute is:

<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; }
6

Not directly.

You can do it with:

2
  • See my answer below, in 2015 this is now possible.
    – BMac
    Feb 24, 2015 at 15:15
  • Thanks a lot sir... This helped
    – Saras Arya
    Sep 30, 2015 at 13:40
3

This won't style the TD but it's a quick work around that may be what you're looking for:

<td><a title="Sample Title">test</a></td>
0
1

In short, you cannot style the title attribute. Its up to the browser how the title is rendered when displayed.

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

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

0

No. Different browsers display the title tooltip differently, and there is no way to style it using css. If you must style it, you need to look for an alternative, such as using jQuery to display custom tooltips.

0

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

I'd suggest that if you have a requirement for a specially formatted tooltip that you use the onmouseover() attribute and generate the popup yourself. As others have pointed out, you could use jQuery, if you want to add support for that to your code. For a lighter-weight solution than jQuery, see SkinnyTip

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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