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

**qwikad.com** · 10-01-2013, 01:19 AM

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="http://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?

**traq** · 10-01-2013, 01:56 AM

You can't style attributes, since they aren't displayed in the first place. Are you trying to select an element based on its title tag?

Code:

[title="how are you"]{ /* styles go here */ }

Or are you trying to use the value of the title tag (e.g., as a "tooltip")?

Code:

a:after{ content: attr(title); }

**qwikad.com** · 10-01-2013, 04:12 AM

Originally Posted by traq

You can't style attributes, since they aren't displayed in the first place. Are you trying to select an element based on its title tag?

Code:

[title="how are you"]{ /* styles go here */ }

Or are you trying to use the value of the title tag (e.g., as a "tooltip")?

Code:

a:after{ content: attr(title); }

traq, I want to style it as a title tag, NOT as a tooltip. Do you think it's possible?

**Beverleyh** · 10-01-2013, 06:54 AM

Huh? A title tag goes in the head section and again is not displayed on the web page - just in the browser tabs and as the clickable link in search results.

What exactly do you mean?

**traq** · 10-01-2013, 07:36 AM

Originally Posted by qwikad.com

traq, I want to style it as a title tag, NOT as a tooltip. Do you think it's possible?

To clarify, are you are talking about a title attribute, or a <title> element?

If you're talking about the attribute, no, you can't style it. The is no way to select it (separately from whatever element it is attached to), and it is not visible anyway.

If you're talking about the element, yes you can style it (though I don't see why you would want to). The <title> element (as well as the <head>) have display:none by default, so you'd need to do:

Code:

head{ 
    display:block;
}
title{
    display:block;
    /* other styles as desired */
}

If I'm missing something, please explain further. It might be helpful if you could give an example.

**qwikad.com** · 10-01-2013, 01:30 PM

Sorry, I did confuse a title tag with a title attribute. I never really had a formal CSS training. Just learned a bunch of things by trial and error.

I've found something that seems to be working. I will just post it here if others happen to be asking the same question.

HTML:

Code:

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

CSS:

Code:

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

**Beverleyh** · 10-01-2013, 01:41 PM

Chris Coyer @ CSS-Tricks posted an article that included similar tooltip CSS - I'll post it here for other folks reference as there is also the following information;

However, do note that browsers have their own tooltip popups... When that comes up, it will cover this, and look weird... There is no way to suppress this, other than just not using the title attribute.

So you still get the default grey browser-generated tooltip overlapping the secondary styled tooltip, which might not leave the best impression on visitors.

Reference article: http://css-tricks.com/css-content/ (see the "Example Trick: CSS3 tooltips" heading)

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

Thread Tools

Search Thread

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

Similar Threads

Resolved :last-child styling not working

styling css menu with fly out in IE 6 not working

Resolved Styling the title in Thumbnail Image Viewer

<title></title> location

<title></title> in header

Bookmarks

Bookmarks

Posting Permissions