body {
    overflow: hidden;
}
.tooltip-example-right,
.tooltip-example-left {
    position: absolute;
}
.tooltip-example-right {
    top: 0;
    right: 0;
}
.tooltip-example-left {
    top: 50%;
    left: 0;
}

.no-display {
    display: none;
}
.tooltip-container {
    -ms-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    position: absolute;
    max-width: 200px;
    padding: 8px 10px 10px;
    font-size: 1rem;
    background-color: #2d2d2d;
    color: #fff;
    border-radius: 4px;
    opacity: 1;
    font-family: "PT Sans", sans-serif;
}
.tooltip-container[class*=" tooltip-"] {
    -webkit-animation: tooltip-anim 0.8s;
    -moz-animation: tooltip-anim 0.8s;
    -o-animation: tooltip-anim 0.8s;
    animation: tooltip-anim 0.8s;
}
.tooltip-container::after {
    position: absolute;
    display: block;
    content: "";
}
.tooltip-container.tooltip-left::after {
    right: -8px;
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-style: solid;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #2d2d2d;
}
.tooltip-container.tooltip-right::after {
    left: -8px;
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-style: solid;
    border-width: 6px 8px 6px 0;
    border-color: transparent #2d2d2d transparent transparent;
}
.tooltip-container.tooltip-center::after {
    top: -8px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-style: solid;
    border-width: 0 6px 8px 6px;
    border-color: transparent transparent #2d2d2d transparent;
}
[data-tooltip] {
    cursor: pointer;
    display: inline-block;
}
/* @keyframes tooltip-anim{
    0%{
        opacity:0;
        -ms-transform:matrix(0.5, 0, 0, 0.8, 0, 0);
        -moz-transform:matrix(0.5, 0, 0, 0.8, 0, 0);
        -webkit-transform:matrix(0.5, 0, 0, 0.8, 0, 0);
        transform:matrix(0.5, 0, 0, 0.8, 0, 0)
    }
    20%{
        -ms-transform:matrix(1.1, 0, 0, 1.1, 0, 0);
        -moz-transform:matrix(1.1, 0, 0, 1.1, 0, 0);
        -webkit-transform:matrix(1.1, 0, 0, 1.1, 0, 0);
        transform:matrix(1.1, 0, 0, 1.1, 0, 0)
    }
    40%{
        opacity:1
    }
    70%{
        -ms-transform:matrix(1, 0, 0, 1, 0, 0);
        -moz-transform:matrix(1, 0, 0, 1, 0, 0);
        -webkit-transform:matrix(1, 0, 0, 1, 0, 0);
        transform:matrix(1, 0, 0, 1, 0, 0)
    }
    100%{
        -ms-transform:matrix(1, 0, 0, 1, 0, 0);
        -moz-transform:matrix(1, 0, 0, 1, 0, 0);
        -webkit-transform:matrix(1, 0, 0, 1, 0, 0);
        transform:matrix(1, 0, 0, 1, 0, 0)
    }
}
@-webkit-keyframes tooltip-anim{
    0%{
        opacity:0;
        -ms-transform:matrix(0.5, 0, 0, 0.8, 0, 0);
        -moz-transform:matrix(0.5, 0, 0, 0.8, 0, 0);
        -webkit-transform:matrix(0.5, 0, 0, 0.8, 0, 0);
        transform:matrix(0.5, 0, 0, 0.8, 0, 0)
    }
    20%{
        -ms-transform:matrix(1.1, 0, 0, 1.1, 0, 0);
        -moz-transform:matrix(1.1, 0, 0, 1.1, 0, 0);
        -webkit-transform:matrix(1.1, 0, 0, 1.1, 0, 0);
        transform:matrix(1.1, 0, 0, 1.1, 0, 0)
    }
    40%{
        opacity:1
    }
    70%{
        -ms-transform:matrix(1, 0, 0, 1, 0, 0);
        -moz-transform:matrix(1, 0, 0, 1, 0, 0);
        -webkit-transform:matrix(1, 0, 0, 1, 0, 0);
        transform:matrix(1, 0, 0, 1, 0, 0)
    }
    100%{
        -ms-transform:matrix(1, 0, 0, 1, 0, 0);
        -moz-transform:matrix(1, 0, 0, 1, 0, 0);
        -webkit-transform:matrix(1, 0, 0, 1, 0, 0);
        transform:matrix(1, 0, 0, 1, 0, 0)
    }
}
  */