Yesterday I wrote an article about overlapping transparency values.
See this post Overlapping transparent divs with one border
This tutorial is made with -webkit- CSS3. The complete set (bottom of the post) is compatible with Opera, Firefox and webkit-browser though.
pure CSS tooltips
I have seen quite a few methods to create pure CSS tooltips but none of them allowed having a transparent background AND tip. Not to talk about a box-shadow or a border…
Is it possible
Yes it is in fact possible. Not only is it possible to make transparent tolltips with a “tip” but it is also possible to add a border around the whole element and to add a box-shadow.
Basic tooltip
A basic tooltip would be done with a div or span element, adding the tip with a pseudoelement :before or :after.
This is the basic technique to make a CSS tooltip.
making a transparent tooltip is a little harder, since normally one element overlaps the other to hide the unneeded part.
Example
so instead of overlapping, I decided to just use a gradient as background for the tip.
Markup HTML
<div class="tool">
I am a pure CSS tooltip.
</div>
CSS code
background-image:-webkit-linear-gradient(45deg,
rgba(55, 55, 55, 0.7) 44%,
transparent 44%, transparent);
Result:
Adding a border and box-shadow
Ok so the first steps are pretty simple and straight forward but how about adding a border and a box shadow?
I think I should mention, that this is only possible with a static width (so far I haven’t found another solution).
Another thing is, that this cannot be done with pseudo-elements. We only have two pseudo-elements for each element. To create the borders and tip I need at least 3 elements.
So let’s change the markup:
Markup HTML
<div class="tool">
<div class="tip"></div>
I am a pure CSS tooltip.
</div>
Now we can add 2 pseudoelements to “.tool”
CSS code
.text .tool{
height:auto;
width:180px;
background-image:-webkit-linear-gradient( rgba(125, 125, 125, 0.5) 50%,
rgba(95, 95, 95, 0.5) 50%,
rgba(55, 55, 55, 0.5));
position:absolute;
left:0;
bottom:100%;
margin-bottom:20px;
padding:10px;
color:rgb(255,255,255);
text-shadow: 0 1px 0 rgb(0,0,0);
border: 2px solid rgba(255,255,255,1);
border-bottom:0;
opacity: 1;
z-index:0;
border-radius:10px;
font-family:Helvetica, Arial, Verdana, sans-serif;
font-size:13px;
font-weight:bold;
}
.tool:before{
content:'';
width:25px;
height:15px;
border-bottom: 2px solid rgba(255,255,255,1);
border-left: 2px solid rgba(255,255,255,1);
position:absolute;
bottom:0;
left:-2px;
border-bottom-left-radius:10px;
box-shadow: -1px 3px 2px -1px rgba(0,0,0,0.8);
}
.tool:after{
content:'';
width:148px;
height:15px;
border-bottom: 2px solid rgba(255,255,255,1);
border-right: 2px solid rgba(255,255,255,1);
position:absolute;
display:block;
bottom:0;
right:-2px;
border-bottom-right-radius:10px;
box-shadow: 1px 3px 2px -1px rgba(0,0,0,0.8);
}
The pseudo-elements actually form the border-bottom of the main element.
If we use the normal border it will also be where the tip is, so the two elements combined width should be:
borderLeft + borderRight = toolWidth – tipWidth
The tip only needs one element. So we still have two pseudo-elements left to play with.
CSS code
.tool .tip{
content: '';
height:20px;
width:20px;
-webkit-transform: rotate(-45deg);
position:absolute;
bottom:-10px;
left:27px;
background-image:-webkit-linear-gradient(45deg,
rgba(55, 55, 55, 0.5) 41%,
transparent 41%, transparent);
z-index:1;
border-left: 2px solid rgba(255,255,255,1);
border-bottom: 2px solid rgba(255,255,255,1);
box-shadow: -2px 2px 2px rgba(0,0,0,0.8);
}
Result:
What about the 2 left-over pseudo-elements?
We can use the pseudo-elements for further styling.
Example: adding a warning sign to the tooltip.
.tool.warning .tip:after{
content: '!';
height:15px;
width:15px;
font-family:Monospace;
background:#f00;
border: 2px #fff solid;
border-radius:10px;
position:absolute;
left:-15px;
top:-15px;
-webkit-transform:rotate(45deg);
text-align:center;
font-size: 15px;
line-height: 15px;
color:#fff;
text-shadow: 0 0 0 rgba(0,0,0,0);
box-shadow: 0 2px 2px rgba(0,0,0,0.7);
}
Result:
Samples:
FIDDLE (tested on: Chrome, Safari, Firefox Opera … latest versions)
Incoming search terms:
pure css3 tooltip, css tooltips 2012, tooltip div css,
Gregor Adams
I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.
