.tooltip {
    /* position: relative; */
}

.tooltip:hover:after {
    background: rgb(250, 250, 250);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.06),0 1px 1px 0 rgba(0,0,0,.2);
    border-radius: 2px;
    color: rgb(0, 0, 0);
    /* bottom: 26px; */
    /* right: -100%; */
    /* width: 100px; */
    left: calc(100% + 20px);
    top: 4px;
    content: attr(tooltip);
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: auto;
    /* width: 220px; */
    max-width: 200px;
    white-space: pre;
    /* z-index: 100; */
}

.tooltip-sml:hover:after {
    padding: 2px 7px;
    top: calc(50% - 10px);
    /* left: 0px; */
    /* right: 80px; */
    left: calc(100% + 10px);
}

.tooltip-left:hover:after {
    /* padding: 2px 7px; */
    /* top: 0; */
    /* left: inherit; */
    /* right: calc(100% + 14px); */
}
.tooltip-top:hover:after {
    padding: 2px 7px;
    top: initial;
    left: 0;
    right: initial;
    bottom: calc(100% + 4px);
}

.tooltip-cell:hover:after {border: 1px solid black;height: 26px;width: 40px;box-sizing: border-box;}

.tooltip-bottom:hover:after {left: calc(50% - 20px);top: calc(100% + 10px);}