.tooltip {
font-family: helvetica, arial;
position: absolute;
display: none;
top: auto;
z-index: 1;
min-width: 210px;
max-width: 450px;
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
bottom: auto;
padding: 6px 16px;
background-color: #FFF;
margin-top: 13px;
-webkit-box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.15);
cursor: default;
}
.tooltip:before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: #cccccc;
z-index: 1;
left: 20px;
}
.tooltip:after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
z-index: 2;
left: 20px;
}
.tooltip.fade {
opacity: 1;
}
.tooltip.show {
display: block;
}
.tooltip.colour {
color: white;
background-color: grey;
}
.tooltip.colour:before, .tooltip.colour:after {
border-bottom-color: grey;
border-bottom-color: grey;
}
.tooltip.top {
-webkit-box-shadow: -2px -1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: -2px -1px 3px rgba(0, 0, 0, 0.15);
box-shadow: -2px -1px 3px rgba(0, 0, 0, 0.15);
position: relative;
position: relative;
position: absolute;
bottom: 1.8em;
}
.tooltip.top:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #cccccc;
z-index: 1;
left: 40px;
}
.tooltip.top:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border: 9px solid transparent;
border-top-color: white;
z-index: 2;
left: 40px;
}