/* custom tooltip css
code created by Rahul Vaghani

:::: OPTIONS ::::

== data in tooltip ==
data-tooltip="I found what I need. And it's not friends, it's things."

== position of tooltip ==
data-tooltip-pos="up"
data-tooltip-pos="left"
data-tooltip-pos="down"
data-tooltip-pos="right"

== size of tooltip ==
data-tooltip-length="medium"
data-tooltip-length="fit"

:::: OPTIONS ::::

:::: demo of code ::::
<div class="d-flex">
    <div class="tooltip_hvr">
        <span class="ss_tooltip" data-tooltip="" data-tooltip-pos="up" data-tooltip-length="medium">I found what I need. And it's not friends, it's things.</span>
    </div>
</div>
:::: demo of code ::::
*/

[data-tooltip-pos=down]:before,[data-tooltip-pos=up]:before{
    border-left:6px solid transparent;
    border-right:6px solid transparent 
}
[data-tooltip-pos=left]:before,[data-tooltip-pos=right]:before{
    border-top:6px solid transparent;
    border-bottom:6px solid transparent 
}
.ss_tooltip{
    position:relative;
    display: block;
    -webkit-filter: drop-shadow(0px 2px 2px rgba(130,130,130,1));
    filter: drop-shadow(0px 2px 2px rgba(130,130,130,1));
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}
.ss_tooltip {
    bottom:100%;
    left:50%;
    position:absolute;
    z-index:1;
    transform:translate(-50%,10px);
    transform-origin:top;
    transition:.18s ease-out .18s;
    opacity: 0;
    visibility: hidden;
    background-color:#f3f7ff;
    content:attr(data-tooltip);
    padding:10px;
    white-space:nowrap;
    margin-bottom:4px;
    font-size: 14px;
    border-radius: 5px;
}
.ss_tooltip:before{
    position: absolute;
    width: 0;
    height: 0;
    content: "";
    margin: auto;
}
.tooltip_hvr {
    position: relative;
}
.tooltip_hvr:hover .ss_tooltip{
    opacity: 1;
    visibility: visible;
    transition:.18s ease-out .18s;
}
[data-tooltip-pos=up]:before{
    border-top:6px solid #f3f7ff;
    bottom: -6px;
    right: 0;
    left: 0;
}
[data-tooltip-pos=down]:before{
    border-bottom:6px solid #f3f7ff;
    top: -6px;
    right: 0;
    left: 0;
}
[data-tooltip-pos=right]:before{
    border-right:6px solid #f3f7ff;
    top: 0;
    bottom: 0;
    left: -6px;
}
[data-tooltip-pos=left]:before{
    border-left:6px solid #f3f7ff;
    top: 0;
    bottom: 0;
    right: -6px;
}
[data-tooltip-pos=down]{
    bottom:auto;
    left:50%;
    top:100%;
    transform:translate(-50%,-10px);
    margin-top:20px;
}
[data-tooltip-pos=up]{
    margin-bottom:20px;
}
[data-tooltip-pos=left]{
    bottom:auto;
    left:auto;
    right:100%;
    top:50%;
    transform:translate(10px,-50%) 
}
[data-tooltip-pos=left]{
    margin-right:18px 
}
[data-tooltip-pos=right]{
    bottom:auto;
    left:100%;
    top:50%;
    transform:translate(-10px,-50%) 
}
[data-tooltip-pos=right]{
    margin-left:18px 
}
[data-tooltip-length]{
    white-space:normal 
}
[data-tooltip-length=small]{
    width:80px 
}
[data-tooltip-length=medium]{
    width:150px 
}
[data-tooltip-length=large]{
    width:260px 
}
[data-tooltip-length=fit]{
    width:100% 
}