Using CSS attr and content for Tooltips
I've found myself in love with CSS content and attr; I've recently written about how you can use the property and expression on a basic level, how you can implement CSS counters, and use for the sake of localization. I wanted to share a few tooltip-style uses of the attr expression and content property.
Tip 1: title Attribute Alternative
The title attribute is useful for displaying simple text tooltips but you can't change any of the "virtual" tooltip's styles. You can replace those tooltips by using a data-tooltip attribute and some CSS instead:
.tooltip-block:hover:after{
border: 1px solid #fc0;
padding: 3px 6px;
background: #fffea1;
content: attr(data-title);
position: absolute;
right: -40px;
top: -26px;
}
I avoided using the title attribute because I don't want both the native tooltip and this custom tooltip to display. This strategy does have a few drawbacks you have to be aware of. You have to hardcode the tooltip position so an element with a tooltip near the edge of the viewport would have its tooltip content reach off screen. In isolated instances, however, this could be an option to spice up basic tooltips.
Tip 2: HTML Review
Oftentimes I'll be reviewing a page and looking for not just the correct text and functionality but also to make sure that attributes of elements are correct; a shining example being ensuring link HREF's are correct. It's annoying to browse source code to do that, and inspecting elements takes forever, so I use content and attr to display information on demand:
/* show link HREFs when inside a "tooltip-links" container */
.tooltip-links a:after {
content: attr(href);
display: none;
}
.tooltip-links a:hover:after {
display: inline-block;
}
Sometimes I always display the content, setting the basic opacity state at 30%, other times I simply display the information I want upon hover. I've implemented this solution on the Mozilla Developer Network in edit mode, displaying the SEO summary text with a tooltip on top of the text itself. A brilliant, simple solution.
I can't believe I neglected using CSS attr and content for so long. It's a great utility, even if only to help me develop. CSS attr and content are great for counters and localization too; what do you use them for?
Some nice tips here David! The best part is that you can easily customize the look of title with CSS. However, if we use CSS for displaying title attribute, will it be SEO friendly?
I like to use them to markup links depending on their target (domain internal vs. external for example).
So I can do
a[href^="http://www.mydomain.com"] { }You might also want to check out this page http://learn.shayhowe.com/advanced-html-css/complex-selectors
Oh wait, that’s not what this post was about. Never mind. Duh.
@Gunjesh, always put users first. And using data-title to replace title is bad practice for some of the users. Maybe it can however be fixed by using aria-label or something.
As for SEO, you miss a bit of content that can(or will) be read by search engines, I wouldn’t worry about that.
Some use I have for using attributes in content is in my print stylesheet for printing url’s.
a[href]:after { content:" (" attr(href) ") "; font-size:0.9em } nav a[href]:after { /*Do not apply the above rule on items in the menu.*/ content:"" }One thing I don’t get about SEO: why the hell are SEO attribute used by browsers or other devices to “access” the web!? Wouldn’t it make much more sense to decouple those 2 purposes? Such as: one SEO attribute “seo-title” & another for-the-user attribute “title” only & only for devices to access the web. See how confusing it gets, it seems that “title” attribute is not a standard across all tags: http://stackoverflow.com/q/24517484/759452
What do I use generated content for?
Oh, you know, the usual… Creating arrow-like triangles for boxes, making labels, clearing floats… But recently I’ve come up with a nice trick to create tables of key/value pairs:
.data-row {display: table-row;} .data-row::before { content: attr(data-label); display: table-cell; } .data-row::after { content: attr(data-value); display: table-cell; }Nice article David, I find content:attr very useful in CSS print stylesheets if you want to show the hyperlink location when printed. I’ve seen various uses of the content attribute but I must admit I’ve not seen it used this way.
Great article. This is a very nice tip as it will avoid us to use jQuery plugin for displaying tooltips.
Keep up the great work. Cheers !!!!!!
Thanks for the great article!! I was just searching last week for more information on using the css content property and couldn’t find anything that helped. I’ve used the CSS Content attribute to power my debug stylesheet, which I toggle on/off via a bookmarklet. Works great !!
I’ve used this technique a few months ago for my “Extremely simple tooltip solution”:
https://github.com/MaciekBaron/extremely-simple-css3-tooltip
break text of the tooltip
Cool but the css doesn’t seem to change and the font is too small and hard to read gray over yellow.
A tooltip is a pop-up message that is shown when the user hovers the mouse over an element such as a TextBox or a Button etcetera.
Observe the following table. Here we have placed the Input (Text) controls (txtUsername, txtPassword) inside the anchor tag. We have added a class name (tooltip) to the anchor tag and given some text to the the alt attribute. Using an alt attribute we will display a tooltip for the Input (Text) controls.
Here is one simple example explaining everything:
http://www.mindstick.com/Articles/280c6c81-dcc6-4b16-adfc-6a00a5edd85e/Simple%20Tooltip%20using%20HTML%20CSS
Its really important to have a special CSS to print for any site in the case of a reader wants to print an article for reading it later offline. It often becomes secondary option for all bloggers too in thinking of that who take print-outs of posts anyhow? But, they forget to think that the reader can also save your page in .pdf format too.
http://www.problogbooster.com/2013/07/print-stylesheet-css-trick-for-blogger.html
I have used
contentattrto display the content of a grid cell on column level, as tool tip in my app., but, its displaying only visible part of the cell not the whole text present in grid cell , is there any way to rectify this?I have used the
content:attrto show the tooltip. It works great. But I want to position the tooltip as per the mouse pointer location. Any suggestions?