*[dd_tooltip], *[dd_tooltip_top], *[dd_tooltip_bottom], *[dd_tooltip_left], *[dd_tooltip_right], *[dd_tooltip_bottom_left] {
    /*
     * CUSTOM PROPERTIES
     *   --dd-tooltip-delay
     *   --dd-tooltip-offset
     *   --dd-tooltip-max-width
     *   --dd-tooltip-font-family
     *   --dd-tooltip-font-size
     *   --dd-tooltip-padding
     *   --dd-tooltip-width
     *   --dd-tooltip-white-space
     *   --dd-tooltip-text-align
     *
     * TO ALIGN LEFT: 
     *   --dd-tooltip-translate-x: 0;
     *   --dd-tooltip-left: 0;
     * 
     * TO ALIGN RIGHT:
     *   --dd-tooltip-left: 100%;
     *   --dd-tooltip-translate-x: -100%;
     */
    
    /* "CONSTANTS" */
    --dd-tooltip-align-left-translate-x: 0;
    --dd-tooltip-align-left-left: 0;
    --dd-tooltip-align-right-translate-x: -100%;
    --dd-tooltip-align-right-left: 100%;
    position: relative;
}

*[dd_tooltip]::after, *[dd_tooltip_top]::after, 
*[dd_tooltip_bottom]::after, *[dd_tooltip_bottom_right]::after, *[dd_tooltip_bottom_left]::after,
*[dd_tooltip_left]::after, *[dd_tooltip_right]::after,
.dd_tooltip
{
    visibility: hidden;
    background: black;
    color: white;
    position: absolute;
    width: max-content;
    max-width: var(--dd-tooltip-max-width, 150px);
    white-space: var(--dd-tooltip-white-space, normal);
    font-family: var(--dd-tooltip-font-family, sans-serif);
    font-size: var(--dd-tooltip-font-size, .9rem);
    font-weight: normal;
    padding: var(--dd-tooltip-padding, .4em .2em);
    border-radius: .2em;
    opacity: 0;
    text-transform: none;
    transition: opacity 150ms ease var(--dd-tooltip-delay, 0ms);
    z-index: 9999999;
    text-align: var(--dd-tooltip-text-align, center);
}

.dd_tooltip {
    position: absolute;
}

*[dd_tooltip]::after, *[dd_tooltip_top]::after {
    content: var(--dd-tooltip-content, attr(dd_tooltip_top));
    left: var(--dd-tooltip-left, 50%);
    bottom: calc(100% + var(--dd-tooltip-offset, .4em));
    transform: translateX(var(--dd-tooltip-translate-x, -50%));
}

*[dd_tooltip]::after {
    content: var(--dd-tooltip-content, attr(dd_tooltip));
}

*[dd_tooltip_bottom]::after {
    content: var(--dd-tooltip-content, attr(dd_tooltip_bottom));
    left: var(--dd-tooltip-left, 50%);
    top: calc(100% + var(--dd-tooltip-offset, .4em));
    transform: translateX(var(--dd-tooltip-translate-x, -50%));
}

*[dd_tooltip_bottom_right]::after {
    --dd-tooltip-translate-x: var(--dd-tooltip-align-right-translate-x);
    --dd-tooltip-left: var(--dd-tooltip-align-right-left);
    
    content: var(--dd-tooltip-content, attr(dd_tooltip_bottom_right));
}

*[dd_tooltip_bottom_left]::after {
    --dd-tooltip-translate-x: 0;
    --dd-tooltip-left: 0;
    content: var(--dd-tooltip-content, attr(dd_tooltip_bottom_left));
    left: var(--dd-tooltip-left, 50%);
    top: calc(100% + var(--dd-tooltip-offset, .4em));
    transform: translateX(var(--dd-tooltip-translate-x, -50%));
}

*[dd_tooltip_left]::after {
    content: var(--dd-tooltip-content, attr(dd_tooltip_left));
    top: 50%;
    right: calc(100% + var(--dd-tooltip-offset, .4em));
    transform: translateY(-50%);
}

*[dd_tooltip_right]::after {
    content: var(--dd-tooltip-content, attr(dd_tooltip_right));
    top: 50%;
    left: var(--dd-tooltip-left, calc(100% + var(--dd-tooltip-offset, .4em)));
    transform: translateY(-50%);
}

*[dd_tooltip]:hover::after, *[dd_tooltip_top]:hover::after, *[dd_tooltip_bottom]:hover::after, *[dd_tooltip_left]:hover::after, *[dd_tooltip_right]:hover::after,
*[dd_tooltip_bottom_left]:hover::after, .dd_tooltip.showing {
    visibility: visible;
    opacity: 1;
}