.aha-tooltip {
    color: #428BCA;
    position: relative;
    display: inline-block;
    cursor: help;
}

.aha-tooltip .tooltip {
    background: #a8ceff;
    border-radius: 6px;
    color: black;
    width: 125%;
    right: 50%;
    left: 50%;
    transform: translate(-50%);
    bottom: calc(100% + 12px);
    position: absolute;
    opacity: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    font-size: 14px;
    line-height: 1.3em;
    min-width: 200px;
}

.aha-tooltip .tooltip:after {
    content: " ";
    position: absolute;
    bottom: -12px;
    right: 50%;
    left: 50%;
    transform: translate(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #a8ceff;
}

.aha-tooltip .tooltip {
    transition: .4s ease-in-out opacity;
}

.aha-tooltip:hover .tooltip {
    opacity: 1;
    height: auto;
}
.aha-tooltip:hover .tooltip {
    padding: 1rem;
    overflow: visible;
}

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


/*!* Base styles for the entire tooltip *!*/
/*[data-tooltip]:before,*/
/*[data-tooltip]:after,*/
/*.aha-tooltip:before,*/
/*.aha-tooltip:after {*/
/*    position: absolute;*/
/*    visibility: hidden;*/
/*    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";*/
/*    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);*/
/*    opacity: 0;*/
/*    -webkit-transition:*/
/*            opacity 0.2s ease-in-out,*/
/*            visibility 0.2s ease-in-out,*/
/*            -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);*/
/*    -moz-transition:*/
/*            opacity 0.2s ease-in-out,*/
/*            visibility 0.2s ease-in-out,*/
/*            -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);*/
/*    transition:*/
/*            opacity 0.2s ease-in-out,*/
/*            visibility 0.2s ease-in-out,*/
/*            transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);*/
/*    -webkit-transform: translate3d(0, 0, 0);*/
/*    -moz-transform:    translate3d(0, 0, 0);*/
/*    transform:         translate3d(0, 0, 0);*/
/*    pointer-events: none;*/
/*}*/

/*!* Show the entire tooltip on hover and focus *!*/
/*[data-tooltip]:hover:before,*/
/*[data-tooltip]:hover:after,*/
/*[data-tooltip]:focus:before,*/
/*[data-tooltip]:focus:after,*/
/*.aha-tooltip:hover:before,*/
/*.aha-tooltip:hover:after,*/
/*.aha-tooltip:focus:before,*/
/*.aha-tooltip:focus:after {*/
/*    visibility: visible;*/
/*    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";*/
/*    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);*/
/*    opacity: 1;*/
/*}*/

/*!* Base styles for the tooltip's directional arrow *!*/
/*.aha-tooltip:before,*/
/*[data-tooltip]:before {*/
/*    z-index: 1001;*/
/*    border: 6px solid transparent;*/
/*    background: transparent;*/
/*    content: "";*/
/*}*/

/*!* Base styles for the tooltip's content area *!*/
/*.aha-tooltip:after,*/
/*[data-tooltip]:after {*/
/*    z-index: 1000;*/
/*    padding: 8px;*/
/*    width: 160px;*/
/*    background-color: #000;*/
/*    background-color: hsla(0, 0%, 20%, 0.9);*/
/*    color: #fff;*/
/*    content: attr(data-tooltip);*/
/*    font-size: 14px;*/
/*    line-height: 1.2;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*}*/

/*!* Top (default) *!*/
/*[data-tooltip]:before,*/
/*[data-tooltip]:after,*/
/*.aha-tooltip:before,*/
/*.aha-tooltip:after,*/
/*.aha-tooltip-top:before,*/
/*.aha-tooltip-top:after {*/
/*    bottom: -35px;*/
/*    left: 50%;*/
/*}*/

/*[data-tooltip]:before,*/
/*.aha-tooltip:before,*/
/*.aha-tooltip-top:before {*/
/*    margin-left: -6px;*/
/*    margin-bottom: -12px;*/
/*    border-top-color: #000;*/
/*    border-top-color: hsla(0, 0%, 20%, 0.9);*/
/*}*/