Regular Coders
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="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?
global $Moderator;
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?
Or are you trying to use the value of the title tag (e.g., as a "tooltip")?Code:[title="how are you"]{ /* styles go here */ }
Code:a:after{ content: attr(title); }
Regular Coders
traq, I want to style it as a title tag, NOT as a tooltip. Do you think it's possible?Originally Posted by traq
Global Moderator
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?
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
global $Moderator;
To clarify, are you are talking about atitleattribute, 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>) havedisplay:noneby default, so you'd need to do:If I'm missing something, please explain further. It might be helpful if you could give an example.Code:head{ display:block; } title{ display:block; /* other styles as desired */ }
Last edited by traq; 10-01-2013 at 06:43 AM.
Regular Coders
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:
CSS:Code:<a href="#" class="tip" tooltip="This is the CSS tooltip">Link</a>
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); }
Global Moderator
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;So you still get the default grey browser-generated tooltip overlapping the secondary styled tooltip, which might not leave the best impression on visitors.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.
Reference article: http://css-tricks.com/css-content/ (see the "Example Trick: CSS3 tooltips" heading)
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
Posting Permissions
Reply With Quote
Bookmarks