In this article I’ve decided to write about quite simple and easy method of how to create the simple “tooltips” – pop-up prompts. In this method we will not use JS, we’ll be content with CSS3 and HTML5.
Disclaimer
Actually, css attr() for property of content pseudoelement appeared in CSS2 and in this method, generally, there is nothing new.
Simple method
This method can be used wherein some small “tooltips” are needed.
First I will show you the code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.tooltip {
border-bottom: 1px dotted #0077AA;
cursor: help;
}
.tooltip::after {
background: rgba(0, 0, 0, 0.8);
border-radius: 8px 8px 8px 0px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
color: #FFF;
content: attr(data-tooltip); /* The main part of the code, determining the content of the pop-up prompt */
margin-top: -24px;
opacity: 0; /* Our element is transparent... */
padding: 3px 7px;
position: absolute;
visibility: hidden; /* ...and hidden. */
transition: all 0.4s ease-in-out; /* To add some smoothness */
}
.tooltip:hover::after {
opacity: 1; /* Make it visible */
visibility: visible;
}
|
We take some element (In our case it’s span), add to it an attribute with text, which will be shown and we take the pseudoelement ::of after. In content of this pseudoelement we, using the most remarkable property – attr(), we set the text to our pop-up prompt and then on: hover we show it. I think that other properties are clear on comments in the code.
Separately I want to mark, how the animation behaves in Chrome and Opera (maybe in IE too).
It is not present. It is connected with that WebKit and Opera does not apply transitions and animation to the pseudoelements ::of before and ::after.
On this occasion there is a
bug registered in WebKit.
Method for more complicated tooltips
Sometimes in tooltip there must be not only text, but also some formatting or image which cannot be inserted in the previous method.
Further I will consider only an example that can be done by this method.
And the code:
1
2
3
4
|
qutIM — Free multiprotocol client. It's ported under the great number of operating systems. 
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
.htooltip span { /* The appearance of our tooltip */
background-color: rgba(0,0,0, 0.8);
border-radius: 15px 15px 15px 0px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
color: #fff;
margin-left: 2px;
margin-top: -75px;
opacity: 0; /* Make it transparent */
padding: 10px 10px 10px 40px;
position: absolute;
text-decoration: none;
visibility: hidden; /* and hidden */
width: 350px;
z-index: 10;
}
.htooltip:hover span { /* show the tooltip when hover */
opacity: 1;
visibility: visible;
}
.htooltip span img { /* example image */
border: 0 none;
float: left;
margin: -71px 0 0 -234px;
opacity: 0;
position: absolute;
visibility: hidden;
z-index: -1;
}
.htooltip:hover span img { /* show the image */
opacity: 1;
visibility: visible;
}
|
Everything is quite simple. On this page you can see the
demo example.
