@import url(https://fonts.googleapis.com/css?family=Bangers);
.tooltip {
    position: relative;
    //width: 210px;
    /* margin: 0 auto; */
    //	font-family: 'Bangers', cursive;
}

.tooltip-content {
    position: absolute;
    line-height: 1.2;
    pointer-events: none;
    text-align: center;
    z-index: 100;
    opacity: 0;
    padding: 1.75em;
    font-size: 1.05em;
    top: -140px;
    color: black;
    font-size: 16px;
    font-weight: 700;
}

.tooltip-effect-2 .tooltip-content {
    width: 220px;
    right: 0;
    margin: 0 0 40px -110px;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}

.tooltip-effect-2:hover .tooltip-content {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.tooltip-effect-2.active .tooltip-content {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}


/* Shape */

.tooltip-shape {
    position: absolute;
    width: 220px;
    height: 165px;
    pointer-events: none;
}

.tooltip-effect-2 .tooltip-shape {
    bottom: 100%;
    right: 0%;
    margin: 0 0 0 -110px;
}

.tooltip:hover .tooltip-shape {
    pointer-events: auto;
}

.tooltip.animate .tooltip-shape {
    pointer-events: auto;
}

.tooltip-shape svg {
    stroke: orange;
    stroke-width: 4;
}

.tooltip-effect-2 .tooltip-shape svg polygon {
    fill: transparent;
    stroke-dasharray: 580;
    stroke-dashoffset: 580;
}

.tooltip-effect-2:hover .tooltip-shape svg polygon {
    stroke-dashoffset: 0;
    fill: #fff;
    -webkit-transition: stroke-dashoffset 0.8s, fill 0.8s;
    transition: stroke-dashoffset 0.8s, fill 0.8s;
}

.tooltip-effect-2.animate .tooltip-shape svg polygon {
    stroke-dashoffset: 0;
    -webkit-transition: stroke-dashoffset 0.8s, fill 0.8s;
    transition: stroke-dashoffset 0.8s, fill 0.8s;
}

.tooltip-effect-2.active .tooltip-shape svg polygon {
    fill: #fff;
}