Design, CG Graphics & Inspiration
How to Create Simple Tooltips with CSS3

How to Create Simple Tooltips with CSS3

I was asked for several times to create simple tooltips, the one with the arrows. It seemed to be easy: I had to do a block with round corners, take triangles and voilà. However, it’s not that simple. Because you know that designers’ imagination is very creative and sometimes even wild. They want to make inclined arrows, frames, or add some shadows. Certainly, it is possible to complete everything on the pictures, but it is impractical. If for no other reason than the heap of actions, in order that all will stretch on all sides.

If to use a bit of fantasy, all of it appeared absolutely solvable by means of CSS.

So, let’s pass from words to deeds.

I should say at once, that you can find all examples by clicking on a reference at the end of the article. And those who like to think about “higher matters” shouldn’t read this article up to the end, because nothing supernatural is presented here.

So, we need to make a draft. We may need one div and 1 or 2 pseudoelements.

div{
position:relative;
display:inline-block;
padding:10px;
min-height:30px;
min-width:100px;
font-family:'Trebuchet MS';
margin-right:30px;
text-align:left;
}

div:before, div:after{
content:'';
position:absolute;
}

Tooltip with a frame

We round the tooltip itself and make a frame. Then we hang on it a pseudoelement with an arrow and by means of transform at first we rotate it, and then we incline it. In the total we’ll get an inclined parallelogram. We set it a frame and through z – index:-1 we hide it “under” the basic block. But now the frame of tooltip appears over the arrow. For this purpose we take another pseudoelement and lay it on exactly over this frame, setting a background colour, the same as the tooltip has. That’s all. You can see the code below.

.t1{
border-radius:10px;
background:#efefef;
border:1px solid #777;
}

.t1:before{
bottom:-5px;
left:10px;
width:20px;
height:10px;
-webkit-transform:rotate(-30deg) skewX(-45deg);
-moz-transform:rotate(-30deg) skewX(-45deg);
-o-transform:rotate(-30deg) skewX(-45deg);
-ms-transform:rotate(-30deg) skewX(-45deg);
background:#efefef;
z-index:-1;
border:1px solid #777;
}

.t1:after{
left:13px;
bottom:-1px;
width:15px;
height:1px;
background:#efefef;
}

Simple tooltip with an arrow

All is simple here. As well as I’ve written in introduction: we take a block and hang it a triangle through a pseudoelement.

.t2{
background:#333;
border-radius:5px;
color:#ccc;
}

.t2:before{
left:10px;
bottom:-10px;
width:0px;
height:0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #333;
}

Tooltip with shadow

Here almost everything is the same, as well as in the first variant, only we add shade. And we make a z – index positive (or we do not specify it), because shade is shade and you can’t hide it behind an auxiliary pseudoelement. I would like to make a note at once, that this construction implies under itself reserving a space at the bottom of the tooltip.

.t3:before{
bottom:-4px;
right:10px;
width:20px;
height:10px;
-webkit-transform:rotate(30deg) skewX(45deg);
-moz-transform:rotate(30deg) skewX(45deg);
-ms-transform:rotate(30deg) skewX(45deg);
-o-transform:rotate(30deg) skewX(45deg);
background:#efefef;
z-index:1;
box-shadow:4px 5px 5px 0px #777;
}

In the example there is a tooltip with a gradient, but I will not describe it, as there everything is made analogically.

Semitransparent tooltip

In its turn it doesn’t differ from the “ordinary tooltip” with an arrow. We set a background through rgba. For an order I inclined it too.

.t5:before{
left:15px;
top:-10px;
width:0px;
height:0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(51,51,51,0.5);
-webkit-transform:skewX(45deg);
-moz-transform:skewX(45deg);
-ms-transform:skewX(45deg);
-o-transform:skewX(45deg);
}

That’s all tricks. Here you can see the example.

You might also be interested in..

Round Avatars in CSS3
Tooltips in CSS3 and HTML5
Making an Image Gallery with CSS3
How to Create Progress Bar with CSS3
SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
CSS3 Now! Transitions
CSS3 Now! Animation, Transparency, and more (Part 2)
Sprite animation in CSS3
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

  • Softlink,
  • January 16, 2012

SHARE THIS POST

Author's website - http://alpatriott.ru/

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • I will try some of them to see which fits best with my blog design, thanks for sharing useful stuff!

  • I will try some of them to see which fits best with my blog design, thanks for sharing useful stuff!

  • Those are pretty awesome tooltips! Thanks for the great post.

  • Thanks for these tips. I will definitely bookmark this page as I think it will save me a lot of time. I can already think of a lot of uses for this. Particularly keen to use the transparent option as I think making these extra bits of info that you might add into the box less imposing and more subtle. Very useful, thanks.

  • azewbz

    Nice..!! :D

  • I will try some of them to see which fits best with my blog design, thanks for sharing useful stuff!

  • I will try some of them to see which fits best with my blog design, thanks for sharing useful stuff!

  • Those are pretty awesome tooltips! Thanks for the great post.

  • Thanks for these tips. I will definitely bookmark this page as I think it will save me a lot of time. I can already think of a lot of uses for this. Particularly keen to use the transparent option as I think making these extra bits of info that you might add into the box less imposing and more subtle. Very useful, thanks.

  • azewbz

    Nice..!! :D