.tooltip {outline:none;}
.tooltip strong {line-height:30px;}
.tooltip:hover {text-decoration:none;} 
.tooltip span {
    z-index:10000;
    display:none;
    padding:14px 20px;
    margin-top:-60px;
    margin-left:30px;
    width:300px;
    line-height:16px;
}
.tooltipbelow span {
	margin-top:60px;
}
.tooltip:hover span{
    display:inline;
    position:absolute;
    color:#111;
    border:1px solid #DCA;
    background:#fffAF0;}
.callout {
	z-index:20000;
	position:absolute;
	top:30px;
	border:0;
	left:-12px;}
    
/*CSS3 extras*/
.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}

.tooltip2 {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip2 .tooltiptext2 {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext2 {
    visibility: visible;
}