CSS3 animated tooltips

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:

01 .content span {
02     background:#eee;
03     border:1px solid #444;
04     cursor:pointer;
05     display:inline-block;
06     outline:none;
07     padding:0 5px;
08     position:relative;
09     text-decoration:none;
10     -webkit-border-radius:5px;
11     -moz-border-radius:5px;
12     -ms-border-radius:5px;
13     -o-border-radius:5px;
14     border-radius:5px;
15 }

And now – for its hidden (floating) area:

01 .content span i {
02     visibility:hidden;
03     border:1px solid #444;
04     bottom:60px;
05     left:50%;
06     margin-left:-110px;
07     opacity:0;
08     padding:10px;
09     position:absolute;
10     width:200px;
11     z-index:99;
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;
21     -o-border-radius:5px;
22     border-radius:5px;
23     -webkit-transition:all 0.3s ease-in-out;
24     -moz-transition:all 0.3s ease-in-out;
25     -o-transition:all 0.3s ease-in-out;
26     -ms-transition:all 0.3s ease-in-out;
27     transition:all 0.3s ease-in-out;
28 }
29 .content span:hover i {
30     bottom:30px;
31     opacity:0.95;
32     visibility:visible;
33 }

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 redgreen and blue.


This is tooltip#2. Which can be in redgreen and blue.


This is tooltip#3. Which can be in redgreen and blue.


This is tooltip#4. Which can be in redgreen and blue.


This is HTML markup of all these samples:

01 <div class="content">
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>.
03 <hr />
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>.
05 <hr />
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>.
07 <hr />
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>.
09 <hr />
10 <span class="img">
13 </span>
14 <span class="img g">
16     <i class="v2"><img src="https://www.script-tutorials.com/demos/209/images/2.jpg"></i>
17 </span>
18 <span class="img r">
20     <i class="v3"><img src="https://www.script-tutorials.com/demos/209/images/3.jpg"></i>
21 </span>
22 </div>

And – the final CSS stylesheet:

001 .content {
002     background-color:rgba(255,255,2550.9);
003     margin:50px auto;
004     width:800px;
005 }
006 .content span {
007     background:#eee;
008     border:1px solid #444;
009     cursor:pointer;
010     display:inline-block;
011     outline:none;
012     padding:0 5px;
013     position:relative;
014     text-decoration:none;
015     -webkit-border-radius:5px;
016     -moz-border-radius:5px;
017     -ms-border-radius:5px;
018     -o-border-radius:5px;
019     border-radius:5px;
020 }
021 .content span i {
022     visibility:hidden;
023     border:1px solid #444;
024     bottom:60px;
025     left:50%;
026     margin-left:-110px;
027     opacity:0;
028     padding:10px;
029     position:absolute;
030     width:200px;
031     z-index:99;
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;
042     border-radius:5px;
043     -webkit-transition:all 0.3s ease-in-out;
044     -moz-transition:all 0.3s ease-in-out;
045     -o-transition:all 0.3s ease-in-out;
046     -ms-transition:all 0.3s ease-in-out;
047     transition:all 0.3s ease-in-out;
048 }
049 .content span:hover i {
050     bottom:30px;
051     opacity:0.95;
052     visibility:visible;
053 }
054 .content span:hover i.v2 {
055     bottom:30px;
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);
061 }
062 .content span:hover i.v3 {
063     -webkit-transform:rotateX(360deg) scale(1.2);
064     -moz-transform:rotateX(360deg) scale(1.2);
065     -ms-transform:rotateX(360deg) scale(1.2);
066     -o-transform:rotateX(360deg) scale(1.2);
067     transform:rotateX(360deg) scale(1.2);
068 }
069 .content span i.v4 {
070     height:70px;
071     margin-left:-60px;
072     padding-top:40px;
073     text-align:center;
074     width:100px;
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%;
080 }
081 .content span i:before,.content span i:after {
082     border-bottom:0;
083     border-left:8px solid transparent;
084     border-right:8px solid transparent;
085     border-top:8px solid #444;
086     bottom:-8px;
087     content:"";
088     left:50%;
089     margin-left:-8px;
090     position:absolute;
091     z-index:100;
092 }
093 /* custom colors */
094 .content span.r {
095     background:#f88;
096 }
097 .content span.r i {
098     background-color:#f44;
099     border:1px solid #f44;
100 }
101 .content span.r i:before, .content span.r i:after {
102     border-top-color:#f44;
103 }
104 .content span.g {
105     background:#8f8;
106 }
107 .content span.g i {
108     background-color:#4f4;
109     border:1px solid #4f4;
110 }
111 .content span.g i:before, .content span.g i:after {
112     border-top-color:#4f4;
113 }
114 .content span.b {
115     background:#88f;
116 }
117 .content span.b i {
118     background-color:#44f;
119     border:1px solid #44f;
120 }
121 .content span.b i:before, .content span.b i:after {
122     border-top-color:#44f;
123 }
124 /* images */
125 .content span img {
126     height:128px;
127     width:128px;
128 }
129 .content span.img i {
130     height:auto;
131     margin-left:-65px;
132     margin-top:-10px;
133     width:auto;
134 }
135 .content span.img i:before, .content span.img i:after {
136     display:none;
137 }
138 .content span:hover i img {
139     height:auto;
140     width:auto;
141 }

Conclusion

I hope you enjoyed this tutorial and find it useful! Welcome back to read our new tutorials!