[data-tooltip]{
    position:relative;
    display:inline-block
}
[data-tooltip]:after,[data-tooltip]:before{
    position:absolute;
    left:50%;
    transform:translate(-50%,-12px);
    z-index:1000;
    pointer-events:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    opacity:0;
    transition:opacity .35s ease .25s
}
[data-tooltip]:before{
    content:attr(data-tooltip);
    background:#333;
    color:#eee;
    padding:8px 12px;
    white-space:nowrap;
    bottom:100%;
    border-radius:3px;
    box-shadow:0 5px 15px -5px rgba(0,0,0,.65)
}
[data-tooltip]:after{
    content:"";
    background:transparent;
    border:8px solid transparent;
    border-top-color:#333
}
[data-tooltip]:active:after,[data-tooltip]:active:before,[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{
    opacity:1
}
[data-tooltip].tooltip-multiline:before{
    width:100vw;
    max-width:240px;
    white-space:normal
}
[data-tooltip][class*=tooltip-bottom]:after,[data-tooltip][class*=tooltip-bottom]:before{
    transform:translate(-50%,12px)
}
[data-tooltip][class*=tooltip-bottom]:before{
    bottom:auto;
    top:100%
}
[data-tooltip][class*=tooltip-bottom]:after{
    bottom:0;
    border:8px solid transparent;
    border-bottom-color:#333
}
[data-tooltip].tooltip-bottom-left:before{
    transform:translate(-24px,12px)
}
[data-tooltip].tooltip-bottom-right:before{
    left:auto;
    right:50%;
    transform:translate(24px,12px)
}
[data-tooltip].tooltip-top-left:before{
    transform:translate(-24px,-12px)
}
[data-tooltip].tooltip-top-right:before{
    left:auto;
    right:50%;
    transform:translate(24px,-12px)
}