/* https://www.w3schools.com/css/css_tooltip.asp */

@keyframes glow{
    0% {opacity: 0.5}
    50% {opacity: 0.9}
    100% {opacity: 0.5}
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: block;
    cursor: pointer;
    width: 0; /* Kind of a hack but can't work out now */
}

/* Tooltip text */
.tooltip .tooltip-text {
    opacity: 0;
    width: 15rem;
    background-color: white;
    color: black;
    text-align: center;
    padding: .25rem 1rem;
    border-radius: 10px;
    font-size: 60%;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    transform: translate(-43%, -10%);
    transition: opacity .3s;
}

.tooltip-title {
    font-weight: 700;
    font-size: 105%;
    line-height: 50%;
}

.tooltip-bullet {
    font-size: 500%;
    line-height: 50%;
    animation: glow;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltip-text {
    opacity: 0.9;
}