.hint,
[data-hint] {
position: relative;
display: inline-block;
}

.hint:before,
.hint:after,
[data-hint]:before,
[data-hint]:after {

position: absolute;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: hidden;
opacity: 0;
pointer-events: none;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-transition-delay: 0ms;
-moz-transition-delay: 0ms;
transition-delay: 0ms;
border-radius: 3px;
}



.hint:hover:before,
.hint:hover:after,
.hint:focus:before,
.hint:focus:after,
[data-hint]:hover:before,
[data-hint]:hover:after,
[data-hint]:focus:before,
[data-hint]:focus:after {

visibility: visible;
opacity: 1;
}


.hint:hover:before,
.hint:hover:after,
[data-hint]:hover:before,
[data-hint]:hover:after {

-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms;
}


.hint:before,
[data-hint]:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
}


.hint:after, [data-hint]:after {
content: attr(data-hint);
background: #3399ff;
color: white;
font-family: 'IranSans-Light';
font-size: 12px;
direction: rtl;
text-align: center;
}

[data-hint='']:before,
[data-hint='']:after {
display: none !important;
}


.hint--top:before {
border-top-color: #3399ff;
}

.hint--bottom:before {
border-bottom-color: #3399ff;
}

.hint--left:before {
border-left-color: #3399ff;
}

.hint--right:before {
border-right-color: #3399ff;
}



/* bottom tooltip*/

.hint--bottom:before {
margin-top: -11px;
left: 52%;
}
.hint--bottom:after {
width: 100px;
margin: 0 auto;
padding: 10px;
position: absolute;
display: block;
margin: 0 auto;
right: 0;
left: 2px;
float: none;
}
.hint--bottom:before,
.hint--bottom:after {
top: 100%;
}
.hint--bottom:hover:after,
.hint--bottom:hover:before,
.hint--bottom:focus:after,
.hint--bottom:focus:before {
-webkit-transform: translateY(8px);
-moz-transform: translateY(8px);
transform: translateY(8px);
}