.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip::before, 
.tooltip::after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    z-index: -10000;
}

.tooltip:hover:before,  
.tooltip:hover:after {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    transition-delay: 100ms;
}

.tooltip:hover::before,  .tooltip:hover::after {
    visibility: visible;
    opacity: 1;
    z-index: 1000;
}

.tooltip::before {
    border-style: solid;
    border-width: 6px;
    border-color: #3e474f transparent transparent transparent;
    content: "";
    z-index: 10001;
}

.tooltip::after {
    background: #3e474f;
    color:  #edeff0;
    padding: 8px 10px;
    content: attr(data-tip);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    white-space: nowrap;
}

/** css triangles **/
.tooltip--left::before {
    border-color: transparent transparent transparent #3e474f;
}
.tooltip--right::before {
    border-color: transparent #3e474f transparent transparent;
}
.tooltip--top::before {
    border-color: #3e474f transparent transparent transparent;
}
.tooltip--bottom::before { 
    border-color: transparent transparent #3e474f transparent; 
}
/**** end triangles */

.tooltip--left::before {
    margin-right: -11px;
    margin-bottom: -6px;
}
.tooltip--left::after {
    margin-bottom: -14px;
}
.tooltip--left::before, .tooltip--left::after {
    right: 100%;
    bottom: 50%;
}
.tooltip--left:hover:before, .tooltip--left:hover:after {
    -webkit-transform: translateX(-8px);
    -moz-transform: translateX(-8px);
    transform: translateX(-8px);
}


.tooltip--right::before {
    margin-left: -11px;
    margin-bottom: -6px;
}
.tooltip--right::after {
    margin-bottom: -14px
}
.tooltip--right::before, .tooltip--right::after {
    left: 100%;
    bottom: 50%;
}
.tooltip--right:hover:before, .tooltip--right:hover:after {
    -webkit-transform: translateX(8px);
    -moz-transform: translateX(8px);
    transform: translateX(8px);
}

.tooltip--top::before,  .tooltip--top::after {
    bottom: 100%;
    left: 50%;
}
.tooltip--top::before {
    left: calc(50% - 6px);
}
.tooltip--top::after {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
.tooltip--top:hover:before {
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    transform: translateY(4px);
}
.tooltip--top:hover:after {
    -webkit-transform: translateX(-50%) translateY(-8px);
    -moz-transform: translateX(-50%) translateY(-8px);
    transform: translateX(-50%) translateY(-8px);
}

.tooltip--bottom::before,  
.tooltip--bottom::after {
    top: 100%;
    left: 50%;
}
.tooltip--bottom::before {
    left: calc(50% - 6px);
} 
.tooltip--bottom:after {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
.tooltip--bottom:hover:before {
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    transform: translateY(-4px);
}
.tooltip--bottom:hover:after {
    -webkit-transform: translateX(-50%) translateY(8px);
    -moz-transform: translateX(-50%) translateY(8px);
    transform: translateX(-50%) translateY(8px);
}



.tooltip--small:after, .tooltip--medium:after, .tooltip--large:after {
    white-space: normal;
    line-height: 1.4em;
    word-wrap: break-word;
}

.tooltip--small:after {
    width: 80px;
}

.tooltip--medium:after {
    width: 150px;
}

.tooltip--large:after {
    width: 300px;
}