/* begin - custom tooltips - add attribute data-tooltip="tooltip value" to elements you want the custom title */
[data-tooltip] {
    /* misc styles */
    font-weight:bold;

    /* require position:relative because the tooltip is position:absolute */
    position:relative;
    display:inline-block;
}

[data-tooltip]::after {
    /* set up our positioning */
    position:absolute;
    top:50%;
    /*left:50%;
    transform:translateX(-50%);*/
    left: 0;

    /* use attr mixed with content to pull the attribute into the world */
    content: attr(data-tooltip);

    /* misc colors, styling */
    background:#0074C89E;
    color:#fff;
    font-size:0.65rem;
    padding:0;
    text-align:center;
    border-radius:3px;
    opacity:0;
    min-width: min(40vw, 150px);
    height: 0%;
	overflow: hidden;

    /* set transitions so it's not instant */
    transition:top .2s ease-out, opacity .2s ease-out;
}

[data-tooltip]:hover::after {
    /* on hover, move tooltip to under the element and make it visible */
    top:100%;
    opacity:1;
    padding:.3rem .5rem;
    height: auto;
    backdrop-filter: blur(10px);
 }