.fs-tooltip-trigger
{
&:not(a)
{
cursor: help;
}
position: relative;
.fs-tooltip
{
opacity: 0;
visibility: hidden;
@include transition(opacity 0.3s ease-in-out);
position: absolute;
background: $tooltip-bkg-color;
color: $tooltip-color;
font-family: 'arial', serif;
font-size: 12px;
padding: 10px;
z-index: 999999;
bottom: 100%;
margin-bottom: 5px;
left: 0;
right: 0;
@include border-radius(5px);
@include box-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
line-height: 1.3em;
font-weight: bold;
text-align: left;
.rtl &
{
text-align: right;
}
&::after
{
content: ' ';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: $tooltip-bkg-color transparent transparent transparent;
position: absolute;
top: 100%;
left: 21px;
.rtl &
{
right: 21px;
left: auto;
}
}
}
&:hover
{
.fs-tooltip
{
visibility: visible;
opacity: 1;
}
}
}