.. Your Daily Design Dosis

A Super Simple And Sexy Tooltip [Only CSS]

| 4 Comments

For a new WordPress Theme (client work) I needed to create a super simple and lightweight CSS tooltip (no multiline tooltip) so I could ‘add’ this effect as a button in the toolbar of the visual editor that comes with WordPress, which can be used to edit post and page content.

I wanted to use this tooltip only for (internal) links in this specific WordPress Theme, so I had to find a way how to ‘embed’ this tooltip effect into a link element and to avoid extra HTML to make it work. First thing what came in mind was to use the “title” attribute (including the use of content: attr(title); in CSS), but my feeling was also that this way I probably was going to show the default title attribute as well when hovering the link!?

You can find the Demo just beneath the code!

Pure CSS tooltips have been around for some while now, so I searched the interwebs for tutorials based on the features I wanted/needed for my tooltip. There are quite some articles about this topic, but all of the solutions I’ve found had some kind of limitations. I found a lot of articles using extra HTML elements to show the tooltip and it’s text, here are some examples of articles I found:

As mentioned above, I didn’t want to use extra HTML elements because my primary goal was to add this toolkit effect as a TinyMCE button and extra HTML could make it more difficult to ‘grab’ the tooltip text from the shortcode generated by this TinyMCE button?

Another article I found was Pure CSS Tool Tips Revisited written by Louis Lazaris. Now this was more what I needed and also confirming my thoughts that if I would use the “title” attribute the default title attribute would also show up on hover. The idea to use a data- attribute was the solution to my problem .. but I didn’t understand why Louis was using the CSS visibility property to show the tooltip on hover?

Somehow I thought it would be more ‘semantic’ (or at least more OOCCS) to display the tooltip when you mouse over the link using the :hover selector in combination with the pseudo elements :before and :after. Using this method and using the “data-title” attribute, the amount of CSS could be reduced!

Note: The :before and :after pseudo elements are supported in: Chrome, Firefox 3.5+, Safari 4+, Opera 6+, IE9+ (and partial support in IE8).

Simple-And-Sexy-Tooltip

/* This is the 'HTML trigger', copy the following line into your visual editor */
<a class="tooltip" href="#" data-title="Example of an Easy and Sexy Tooltip">Example</a>

/* CSS Styles (Copy this into the style.css file of your theme) */
.tooltip { display:inline; position:relative }
.tooltip:hover { text-decoration:none }
.tooltip:hover:after {
	color:#FFF;
	font-size: 14px;
	background:#000;
	background:rgba(0,0,0,.8);
	content:attr(data-title);
	padding:3px 8px;
	white-space:nowrap;
	display:block;
	position:absolute;
	left:30%;
	bottom:18px;
	z-index:8
}
.tooltip:hover:before {
        border:solid;
        border-color:rgba(0,0,0,.8) transparent;
        border-width:6px 6px 0 6px;
        content:"";
        display:block;
        position:absolute;
	left:50%;
	bottom:12px;
        z-index:9
}

Demo (hover over the following link)

 

Example

More Uses/Possibilities for this Method

Using this method also makes it easy to ‘pimp’ your tooltip with some extra CSS3 properties like transparency, gradients and/or rounded corners (I only used transparency in this example). If you want to have one-colored tooltips, use the identical rgba for .tooltip:hover:after as well as .tooltip:hover:before.

Another possibility is to make different colored tooltips by adding an extra class to the link element that defines the background-color and border-color of this new colored tooltip. Easy does it!

I also found another big pro for using this method, it also works on HTML elements that aren’t link elements, so you can use it for paragraphs, spans, div’s or even blockquotes! I’ve also shared the codes on Codepen, in case you wanna fool around with the codes to see what happens?

If you think you know a shorter or better way to code this, please let me know in the comments. So far I can check, this CSS Tooltip works in all modern browsers, but you can always use modernizr to make this magic also happen in IE6,7 and 8!

 

Author: Gonzo the Great

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

4 comments

on this article: “A Super Simple And Sexy Tooltip [Only CSS]”
  1. Hey, Gonzo, thanks for writing this, and for sharing my stuff on Twitter and elsewhere.

    The reason that I used the visibility property is because I want the tooltip to have the ability to use transitions. The way you’ve done it is great, I really like it because it saves a bunch of code. For example, if I fork mine and write it somewhat like yours, then I get this:

    http://jsbin.com/ajutil/359/edit

    But like I said, I was using a transition to animate the tool tip, so I had to use “visibility” instead of “display” (the latter of which cannot animate/transition) and because of this, I had to use separate selectors for the hover vs. normal state of the pseudo-elements.

    But thanks for writing this, it opened my eyes to a slightly different way of doing it, assuming the transition capability isn’t important.

    • Hi Louis,

      thanks for commenting and for your kind words, much appreciated Sir! Okay, now I get it why you used the visibility property .. that does explain a lot more ;-P Anyhowz, I was glad to stumble upon your article cuz it gave me the great idea to use the data-title tag in stead of the title tag! Probably I would have figured that one out too, but your article saved me that time, haha!

      My goal was to write the shortest code possible to add a TinyMCE button into a responsive WP theme I was making for a client, especially to ‘mark’ the internal links in the site. And this code made it happen for me, hurray ;-P

      Have a great day Louis! Cheers & Ciao!

  2. This is a nice tutorial, one can generate css buttons using http://www.cssbuttoncode.com

top