CSS3 animated tooltips

CSS3 animated tooltips

11 605
CSS3 animated tooltips

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:

<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:

<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 pauperfoolish pauper tooltip 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:

.content span {
    background:#eee;
    border:1px solid #444;
    cursor:pointer;
    display:inline-block;
    outline:none;
    padding:0 5px;
    position:relative;
    text-decoration:none;

    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}

And now – for its hidden (floating) area:

.content span i {
    visibility:hidden;
    border:1px solid #444;
    bottom:60px;
    left:50%;
    margin-left:-110px;
    opacity:0;
    padding:10px;
    position:absolute; 
    width:200px;
    z-index:99;

    background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));  
    background-color: #eee;

    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;

    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.content span:hover i {
    bottom:30px;
    opacity:0.95;
    visibility:visible;
}

Fine and easy, right? But that’s not all. I have prepared several more effects (and even with different colors).

This is tooltip#1Tooltip number one. Which can be in redTooltip#1 – red color, greenTooltip#1 – green color and blueTooltip#1 – blue color.


This is tooltip#2Tooltip number two. Which can be in redTooltip#2 – red color, greenTooltip#2 – green color and blueTooltip#2 – blue color.


This is tooltip#3Tooltip number three. Which can be in redTooltip#3 – red color, greenTooltip#3 – green color and blueTooltip#3 – blue color.


This is tooltip#4Tooltip number four. Which can be in redTooltip#4 – red color, greenTooltip#4 – green color and blueTooltip#4 – blue color.


This is HTML markup of all these samples:

<div class="content">

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>.
<hr />
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>.
<hr />
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>.
<hr />
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>.
<hr />
<span class="img">
    <img src="http://www.script-tutorials.com/demos/209/images/1.jpg">
    <i><img src="http://www.script-tutorials.com/demos/209/images/1.jpg"></i>
</span>

<span class="img g">
    <img src="http://www.script-tutorials.com/demos/209/images/2.jpg">
    <i class="v2"><img src="http://www.script-tutorials.com/demos/209/images/2.jpg"></i>
</span>

<span class="img r">
    <img src="http://www.script-tutorials.com/demos/209/images/3.jpg">
    <i class="v3"><img src="http://www.script-tutorials.com/demos/209/images/3.jpg"></i>
</span>

</div>

And – the final CSS stylesheet:

.content {
    background-color:rgba(255,255,255, 0.9);
    margin:50px auto;
    width:800px;
}
.content span {
    background:#eee;
    border:1px solid #444;
    cursor:pointer;
    display:inline-block;
    outline:none;
    padding:0 5px;
    position:relative;
    text-decoration:none;

    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}
.content span i {
    visibility:hidden;
    border:1px solid #444;
    bottom:60px;
    left:50%;
    margin-left:-110px;
    opacity:0;
    padding:10px;
    position:absolute; 
    width:200px;
    z-index:99;

    background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));  
    background-color: #eee;

    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;

    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.content span:hover i {
    bottom:30px;
    opacity:0.95;
    visibility:visible;
}
.content span:hover i.v2 {
    bottom:30px;

    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);
    -o-transform:scale(1.3);
    transform:scale(1.3);
}
.content span:hover i.v3 {
    -webkit-transform:rotateX(360deg) scale(1.2);
    -moz-transform:rotateX(360deg) scale(1.2);
    -ms-transform:rotateX(360deg) scale(1.2);
    -o-transform:rotateX(360deg) scale(1.2);
    transform:rotateX(360deg) scale(1.2);
}
.content span i.v4 {
    height:70px;
    margin-left:-60px;
    padding-top:40px;
    text-align:center;
    width:100px;

    -webkit-border-radius: 50% 50% 50% 50%;
    -moz-border-radius: 50% 50% 50% 50%;
    -ms-border-radius: 50% 50% 50% 50%;
    -o-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;
}
.content span i:before,.content span i:after {
    border-bottom:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid #444;
    bottom:-8px;
    content:"";
    left:50%;
    margin-left:-8px;
    position:absolute;
    z-index:100;
}

/* custom colors */
.content span.r {
    background:#f88;
}
.content span.r i {
    background-color:#f44;  
    border:1px solid #f44;
}
.content span.r i:before, .content span.r i:after {
    border-top-color:#f44;
}

.content span.g {
    background:#8f8;
}
.content span.g i {
    background-color:#4f4;  
    border:1px solid #4f4;
}
.content span.g i:before, .content span.g i:after {
    border-top-color:#4f4;
}

.content span.b {
    background:#88f;
}
.content span.b i {
    background-color:#44f;  
    border:1px solid #44f;
}
.content span.b i:before, .content span.b i:after {
    border-top-color:#44f;
}

/* images */
.content span img {
    height:128px;
    width:128px;
}
.content span.img i {
    height:auto;
    margin-left:-65px;
    margin-top:-10px;
    width:auto;
}
.content span.img i:before, .content span.img i:after {
    display:none;
}
.content span:hover i img {
    height:auto;
    width:auto;
}

Conclusion

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

SIMILAR ARTICLES

Sliding single-level menu

0 203

11 COMMENTS

  1. A superb tutorial.
    You are taking CSS3 into newer heights.
    Most importantly you are making it look so simple.
    That is the beauty of your tutorials.
    Thanks for this tutorial.

  2. Thanks a lot ! Until now, I was using a Mootools script to provide this functionnality for an event management component for Joomla but the Mootools script was no more working (old version of Mootools) and, try to keep a descendant compatibility, I was searching for something, more robust.

    Many thanks mister admin !

    • Hello Buzz,
      Hum, I can’t check it in safary (is it not installed at my computer), but maybe in case of safari we should add some custom vendor-styles?

  3. Muito Bom!

    A vantagem de utilizar span e span i, é que pode ser colocados links e imagens dentro do tooltip. Diferente de outros que utilizam o title para gerar o tooltip.

    Obrigado!

Leave a Reply