.mysite-tooltips {
position: relative;
display: inline;
}
.mysite-tooltips:hover {
background-color: #f2f2f2;
}
.mysite-tooltips > span {
font:300 12px 'Open Sans', sans-serif;
position: absolute;
padding:5px 10px;
width:140px;
text-align: center;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
transition: transform .3s, opacity .6s, margin-left .2s, margin-top .2s;
}
.mysite-tooltips[mysite-tooltip-position="top"] > span ,
.mysite-tooltips[mysite-tooltip-position="right"] > span {
margin-left:10px;
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.mysite-tooltips[mysite-tooltip-position="bottom"] > span ,
.mysite-tooltips[mysite-tooltip-position="left"] > span {
-ms-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.mysite-tooltips[mysite-tooltip-position="right"] > span ,
.mysite-tooltips[mysite-tooltip-position="left"] > span {
margin-top:30px;
}
.mysite-tooltips > span:after {
content: '';
position: absolute;
width: 0; height: 0;
}
.mysite-tooltips[mysite-tooltip-position="top"] > span:after{
top: 100%;
left: 50%;
margin-left: -8px;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.mysite-tooltips[mysite-tooltip-position="bottom"] > span:after{
bottom: 100%;
left: 50%;
margin-left: -8px;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.mysite-tooltips[mysite-tooltip-position="left"] > span:after{
top: 50%;
left: 100%;
margin-top: -8px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.mysite-tooltips[mysite-tooltip-position="right"] > span:after{
top: 50%;
right: 100%;
margin-top: -8px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.mysite-tooltips:hover > span {
visibility: visible;
opacity: 1;
z-index: 999;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
filter: alpha(opacity=100);
}
.mysite-tooltips[mysite-tooltip-position="top"]:hover > span{
bottom: 30px;
left: 50%;
margin-left: -76px;
}
.mysite-tooltips[mysite-tooltip-position="bottom"]:hover > span{
top: 30px;
left: 50%;
margin-left: -76px;
}
.mysite-tooltips[mysite-tooltip-position="left"]:hover > span{
right: 100%;
top: 50%;
margin-top: -15px;
margin-right: 15px;
}
.mysite-tooltips[mysite-tooltip-position="right"]:hover > span{
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
}