Styling a title tag with CSS - nothing seems to be working

I can't seem to find even a remote solution to this. Those of you who know CSS well, can we style the title attribute inside the anchor tag?

<a href="h t t p://something.com" title="how are you">something</a>

Some claim that with CSS3 it's possible, but I can find anything that would work. Anyone?

 

try this:
http://jsfiddle.net/tDQWN/

 

Guys, I want to style it as a title tag, NOT as a tooltip or anything like that. Do you think it's possible?

 

TITLE is not a tag when it is on a render element such as an <a>nchor... It's an attribute -- a value. That it shows at all is a function of the browser which is why the appearance is different and placed differently in EVERY browser. While you can style the tooltip effect with CSS3 using attribute selectors in some browsers (it's still VERY hit or miss) you cannot treat it like a normal render element -- which I suspect is what you are asking.

The only time there is such a thing as a TITLE tag is inside HEAD, and that's a non-render non-content element so that can't be styled either.

You could use javascript to turn the title into a render element, but really if you want it showing as normal text, put it inside the anchor as normal text. Generally speaking if you "need" the TITLE attribute in the first place, you've probably got something really wrong with the content of said elements with all but the rarest of exceptions. (abbr, acronym, in combination with accesskeys)

 

I did confuse a title tag with a title attribute. Sorry about that. I think I've found something that seems to be working. It acts like a tag attribute... seems to be. I'll just post it here if others happen to have the same question. Thanks all for your input!

HTML:

<a href="#" class="tip" tooltip="This is the CSS tooltip">Link</a>

Code (markup):

CSS:

a.tip {
  color: #900;
  text-decoration: none;
}

a.tip:hover {
  color: red;
  position: relative;
}

a.tip:hover:after {
  content: attr(tooltip);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

Code (markup):