Taleboble/Tooltip

CSS3 taleboble

by Kenneth Luplau-Brøgger

HTML

<div class="tooltip">
    <p>Kort text</p>
</div>
<div class="tooltip gradient">
    <p>Det her er en gradient - med lang tekst</p>
</div>

CSS

.tooltip {
   background: white;
   position: relative;
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
   border: 1px solid rgba(0,0,0,0.2);
   display: inline-block;
}
.tooltip:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   bottom: -14px;
   left: 50%;
   border-top: 14px solid rgba(0,0,0,0.2);
   border-left: 14px solid transparent; 
   border-right: 14px solid transparent; 
   margin: 0 0 0 -14px;
}
.tooltip:after{
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   bottom: -13px;
   left: 50%;
   border-top: 13px solid white;
   border-left: 13px solid transparent; 
   border-right: 13px solid transparent; 
   margin: 0 0 0 -13px;
}
.tooltip p {
    padding: 8px;
    font-family: arial;
    font-size: 12px;
}
.tooltip.gradient {
    background: -webkit-linear-gradient(top,  #bee28b 1px, #a0d558 1px,#5fb61b 100%);
}
.tooltip.gradient p {
    color: #fff;
}
.tooltip.gradient:before {
   border-top: 14px solid rgba(0,0,0,0.4);
}
.tooltip.gradient:after{
   border-top: 13px solid #5fb61b;
}