.tooltip {
    display: inline-block;
    position: relative;
    text-indent: 0;
    cursor: help;
}
.tooltip .tip {
    position: absolute;
    bottom: 100%;
    left: -20em; /* = max-width */
    right: -20em; /* = max-width */
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
    max-width: 20em;
    max-height: 80vh;
    overflow: auto;
    visibility: hidden;
    margin: 0 auto .4em;
    padding: .3em;
    border: 2px solid rgb(181,181,181);
    font-size: 90%;
    background: #f3f3f3;
    line-height: normal;
    cursor: auto;
}
.tooltip.left .tip {
    left: 0;
    right: -20em;
    margin: 0 0 .4em;
}
.tooltip.right .tip {
    left: -20em;
    right: 0;
    margin: 0 0 .4em auto;
}
.tooltip:after {
    content: "";
    position: absolute;
    top: -.4em;
    left: 50%;
    visibility: hidden;
    margin: 0 0 0 -.4em;
    border: .4em solid;
    border-color: rgb(181,181,181) transparent transparent transparent;
    cursor: auto;
}
.tooltip.left:after {
    left: 1em;
}
.tooltip.right:after {
    left: auto;
    right: .6em; /* 1em - .4em */
}
.tooltip:before {
    content: "";
    position: absolute;
    top: -.4em;
    left: 0;
    right: 0;
    height: .4em;
    visibility: hidden;
}
.tooltip:hover .tip,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus .tip,
.tooltip:focus:before,
.tooltip:focus:after {
    visibility: visible;
    transition: 0s .4s;
}
.tooltip:focus {
    outline: none;
}
.tooltip.anim .tip,
.tooltip.anim:after {
    opacity: 0;
    transform: translateY(1.5em) scale(.3);
    transform-origin: center bottom;
}
.tooltip.anim:after {
    transform: translateY(.7em) scale(.3); /* 1.7 = 1.5 / (1.4*2) */
}
.tooltip.anim:hover .tip,
.tooltip.anim:hover:after,
.tooltip.anim:focus .tip,
.tooltip.anim:focus:after {
    opacity: 1;
    transition: .6s .4s;
    transform: translateY(0);
}
@media (max-width: 20em){
    .tooltip .tip {
        max-width: 100vw;
        box-sizing: border-box;
    }
}