How to change the style of Title attribute inside the anchor tag?

Question

Example:

<a href="example.com" title="My site"> Link </a>

How do I change the "title" attribute. By default, it just has yellow background and small font. I would like to make it bigger and change background color.

[edit] Is there CSS setting for the title attribute?

Answer 1

I would recommend a javascript tooltip. I've used Zorn's tooltip often and love the flexibility: http://www.walterzorn.com/tooltip/tooltip_e.htm

There are also some jQuery options out there if you're more comfortable: http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

Answer 2

CSS can't change the tooltip appearance. It is browser/OS-dependent. If you want something different you'll have to use Javascript to generate markup when you hover over the element instead of the default tooltip.

Answer 3

Here is an example to do it

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

CSS part:

A.tip {
    BORDER-BOTTOM: 1px dashed; TEXT-DECORATION: none
}
A.tip:hover {
    CURSOR: help; POSITION: relative
}
A.tip SPAN {    DISPLAY: none
}
A.tip:hover SPAN {
    BORDER-RIGHT: #c0c0c0 1px dotted; PADDING-RIGHT: 20px; BORDER-TOP: #c0c0c0 1px dotted; DISPLAY: block; PADDING-LEFT: 5px; Z-INDEX: 100; BACKGROUND: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%; LEFT: 0px; PADDING-BOTTOM: 5px; MARGIN: 10px; BORDER-LEFT: #c0c0c0 1px dotted; WIDTH: 250px; PADDING-TOP: 5px; BORDER-BOTTOM: #c0c0c0 1px dotted; POSITION: absolute; TOP: 10px; TEXT-DECORATION: none
}

Answer 4

Really very nice information, i feel it is very helpful for me, Nashville party bus