Today I will tell you how to create simple and attractive CSS3 tooltips with using transitions and several another css3 properties. You will see all these tooltips directly in that article. You can apply custom tooltips and for text elements and for images too.
Ok, lets start !
Step 1. HTML
Lets imagine, that you have some plain text, as example:
1 |
< div class = "content" >The King sat naked. Like a foolish pauper on the street, he sat leaning against a cold wall, drawing in his blue, goose-bumped legs. He shivered, with his eyes closed, he listened, but everything was quiet.</ div > |
Now, lets wrap few words with tooltip:
1 |
< div class = "content" >The King sat naked. Like a < span >foolish pauper< i >foolish pauper tooltip</ i ></ span > on the street, he sat leaning against a cold wall, drawing in his blue, goose-bumped legs. He shivered, with his eyes closed, he listened, but everything was quiet.</ div > |
Here you can see live example:
The King sat naked. Like a foolish pauper on the street, he sat leaning against a cold wall, drawing in his blue, goose-bumped legs. He shivered, with his eyes closed, he listened, but everything was quiet.
How I did it – pretty easy:
Step 2. CSS
First, lets define style for our visible tooltip element:
03 |
border : 1px solid #444 ; |
10 |
-webkit-border-radius: 5px ; |
11 |
-moz-border-radius: 5px ; |
12 |
-ms-border-radius: 5px ; |
And now – for its hidden (floating) area:
03 |
border : 1px solid #444 ; |
12 |
background-image :-webkit-linear-gradient(rgba( 255 , 255 , 255 ,. 6 ), rgba( 255 , 255 , 255 ,. 2 )); |
13 |
background-image :-moz-linear-gradient(rgba( 255 , 255 , 255 ,. 6 ), rgba( 255 , 255 , 255 ,. 2 )); |
14 |
background-image :-ms-linear-gradient(rgba( 255 , 255 , 255 ,. 6 ), rgba( 255 , 255 , 255 ,. 2 )); |
15 |
background-image :-o-linear-gradient(rgba( 255 , 255 , 255 ,. 6 ), rgba( 255 , 255 , 255 ,. 2 )); |
16 |
background-image :linear-gradient(rgba( 255 , 255 , 255 ,. 6 ), rgba( 255 , 255 , 255 ,. 2 )); |
17 |
background-color : #eee ; |
18 |
-webkit-border-radius: 5px ; |
19 |
-moz-border-radius: 5px ; |
20 |
-ms-border-radius: 5px ; |
23 |
-webkit-transition: all 0.3 s ease-in-out; |
24 |
-moz-transition: all 0.3 s ease-in-out; |
25 |
-o-transition: all 0.3 s ease-in-out; |
26 |
-ms-transition: all 0.3 s ease-in-out; |
27 |
transition: all 0.3 s ease-in-out; |
29 |
.content span:hover i { |
Fine and easy, right? But that’s not all. I have prepared several more effects (and even with different colors).
This is tooltip#1. Which can be in red, green and blue.
This is tooltip#2. Which can be in red, green and blue.
This is tooltip#3. Which can be in red, green and blue.
This is tooltip#4. Which can be in red, green and blue.






This is HTML markup of all these samples:
02 |
This is < span >tooltip#1< i class = "v1" >Tooltip number one</ i ></ span >. Which can be in < span class = "r" >red< i class = "v1" >Tooltip#1 - red color</ i ></ span >, < span class = "g" >green< i class = "v1" >Tooltip#1 - green color</ i ></ span > and < span class = "b" >blue< i class = "v1" >Tooltip#1 - blue color</ i ></ span >. |
04 |
This is < span >tooltip#2< i class = "v2" >Tooltip number two</ i ></ span >. Which can be in < span class = "r" >red< i class = "v2" >Tooltip#2 - red color</ i ></ span >, < span class = "g" >green< i class = "v2" >Tooltip#2 - green color</ i ></ span > and < span class = "b" >blue< i class = "v2" >Tooltip#2 - blue color</ i ></ span >. |
06 |
This is < span >tooltip#3< i class = "v3" >Tooltip number three</ i ></ span >. Which can be in < span class = "r" >red< i class = "v3" >Tooltip#3 - red color</ i ></ span >, < span class = "g" >green< i class = "v3" >Tooltip#3 - green color</ i ></ span > and < span class = "b" >blue< i class = "v3" >Tooltip#3 - blue color</ i ></ span >. |
08 |
This is < span >tooltip#4< i class = "v4" >Tooltip number four</ i ></ span >. Which can be in < span class = "r" >red< i class = "v4" >Tooltip#4 - red color</ i ></ span >, < span class = "g" >green< i class = "v4" >Tooltip#4 - green color</ i ></ span > and < span class = "b" >blue< i class = "v4" >Tooltip#4 - blue color</ i ></ span >. |
And – the final CSS stylesheet:
002 |
background-color :rgba( 255 , 255 , 255 , 0.9 ); |
008 |
border : 1px solid #444 ; |
010 |
display :inline- block ; |
014 |
text-decoration : none ; |
015 |
-webkit-border-radius: 5px ; |
016 |
-moz-border-radius: 5px ; |
017 |
-ms-border-radius: 5px ; |
018 |
-o-border-radius: 5px ; |
023 |
border : 1px solid #444 ; |
032 |
background-image :-webkit-linear-gradient(rgba( 255 , 255 , 255 ,. 6 ), rgba( 255 , 255 , 255 ,. 2 )); |
033 |
background-image :-moz-linear-gradient(rgba( 255 , 255 , 255 ,. 6 ), rgba( 255 , 255 , 255 ,. 2 )); |
034 |
background-image :-ms-linear-gradient(rgba( 255 , 255 , 255 ,. 6 ), rgba( 255 , 255 , 255 ,. 2 )); |
035 |
background-image :-o-linear-gradient(rgba( 255 , 255 , 255 ,. 6 ), rgba( 255 , 255 , 255 ,. 2 )); |
036 |
background-image :linear-gradient(rgba( 255 , 255 , 255 ,. 6 ), rgba( 255 , 255 , 255 ,. 2 )); |
037 |
background-color : #eee ; |
038 |
-webkit-border-radius: 5px ; |
039 |
-moz-border-radius: 5px ; |
040 |
-ms-border-radius: 5px ; |
041 |
-o-border-radius: 5px ; |
043 |
-webkit-transition: all 0.3 s ease-in-out; |
044 |
-moz-transition: all 0.3 s ease-in-out; |
045 |
-o-transition: all 0.3 s ease-in-out; |
046 |
-ms-transition: all 0.3 s ease-in-out; |
047 |
transition: all 0.3 s ease-in-out; |
049 |
.content span:hover i { |
054 |
.content span:hover i.v 2 { |
056 |
-webkit-transform:scale( 1.3 ); |
057 |
-moz-transform:scale( 1.3 ); |
058 |
-ms-transform:scale( 1.3 ); |
059 |
-o-transform:scale( 1.3 ); |
060 |
transform:scale( 1.3 ); |
062 |
.content span:hover i.v 3 { |
063 |
-webkit-transform:rotateX( 360 deg) scale( 1.2 ); |
064 |
-moz-transform:rotateX( 360 deg) scale( 1.2 ); |
065 |
-ms-transform:rotateX( 360 deg) scale( 1.2 ); |
066 |
-o-transform:rotateX( 360 deg) scale( 1.2 ); |
067 |
transform:rotateX( 360 deg) scale( 1.2 ); |
075 |
-webkit-border-radius: 50% 50% 50% 50% ; |
076 |
-moz-border-radius: 50% 50% 50% 50% ; |
077 |
-ms-border-radius: 50% 50% 50% 50% ; |
078 |
-o-border-radius: 50% 50% 50% 50% ; |
079 |
border-radius: 50% 50% 50% 50% ; |
081 |
.content span i:before,.content span i:after { |
083 |
border-left : 8px solid transparent ; |
084 |
border-right : 8px solid transparent ; |
085 |
border-top : 8px solid #444 ; |
098 |
background-color : #f44 ; |
099 |
border : 1px solid #f44 ; |
101 |
.content span.r i:before, .content span.r i:after { |
102 |
border-top-color : #f44 ; |
108 |
background-color : #4f4 ; |
109 |
border : 1px solid #4f4 ; |
111 |
.content span.g i:before, .content span.g i:after { |
112 |
border-top-color : #4f4 ; |
118 |
background-color : #44f ; |
119 |
border : 1px solid #44f ; |
121 |
.content span.b i:before, .content span.b i:after { |
122 |
border-top-color : #44f ; |
129 |
.content span.img i { |
135 |
.content span.img i:before, .content span.img i:after { |
138 |
.content span:hover i img { |
Conclusion
I hope you enjoyed this tutorial and find it useful! Welcome back to read our new tutorials!