Using CSS attr and content for Tooltips

Discussion

1. Gunjesh Kumar

   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?
2. Tom

   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
3. Tom

   Oh wait, that’s not what this post was about. Never mind. Duh.
4. René

   @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:""
    }
   
• Adrien Be

  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
5. MaxArt

   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;
   }
   
6. Lacey Tech Solutions

   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.
7. Vishal G Kamath

   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 !!!!!!
8. Karen Walters

   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 !!
9. Maciek Baron

   I’ve used this technique a few months ago for my “Extremely simple tooltip solution”:

   https://github.com/MaciekBaron/extremely-simple-css3-tooltip
10. sivamani

    break text of the tooltip
11. John Boyd

    Cool but the css doesn’t seem to change and the font is too small and hard to read gray over yellow.
12. JYOTSNA

    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
13. Nitin

    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
14. Haricharan

    I have used content attr to 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?
15. Suchita

    I have used the content:attr to show the tooltip. It works great. But I want to position the tooltip as per the mouse pointer location. Any suggestions?