Discussion on: Understanding pseudo elements: Creating Simple Tooltips with CSS and HTML

[Sam Miller]

Thanks for the tutorial. It's been a couple of years since you posted it. Would you make any adjustments to the code today? Although the code works great, I get the following vscode error, "ARIA attributes must conform to valid names: Invalid ARIA attribute name: aria-description". To avoid this error, I replaced content: attr(aria-description) with content: attr(data-tooltip) so that the data-tooltip content will now display instead--for example, data-tooltip="contact us" data-tooltip-position="bottom".

I changed your css to the following:
data-tooltip {
position: relative;
--tooltip-bg: #000;
--tooltip-color: #fff;
--tooltip-font-size: .8em;
--tooltip-font-weight: 600;
}

data-tooltip::after {
left: 50%;
opacity: 0;
position: absolute;
top: calc(100% + 0.5rem);
transition: opacity 0.15s ease-in-out, visibility 0s 0.15s ease-in-out;
visibility: hidden;
}

data-tooltip::before {
border-bottom: 8px solid var(--tooltip-bg, #000);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
height: 0;
transform: translateX(-50%) translateY(calc(-100% + 1px));
width: 0;
z-index: 1;
}

data-tooltip::after {
background-color: var(--tooltip-bg, #000);
border-radius: 5px;
color: var(--tooltip-color, #fff);
content: attr(data-tooltip);
font-size: var(--tooltip-font-size, 0.8rem);
font-weight: var(--tooltip-font-weight, 600);
padding: 0.5em 0.75em;
transform: translate3d(-50%, 0, 0);
white-space: nowrap;
z-index: 1;
}

data-tooltip:focus::after {
opacity: 1;
transition: opacity 0.15s ease-in-out;
visibility: visible;
}

[data-tooltip][data-tooltip-position=top]::before,
[data-tooltip][data-tooltip-position=top]::after {
bottom: calc(100% + 0.5rem);
top: auto;
}

[data-tooltip][data-tooltip-position=top]::before {
transform: translateX(-50%) translateY(calc(100% - 1px)) rotateZ(180deg);
}

[data-tooltip][data-tooltip-position=left]::before,
[data-tooltip][data-tooltip-position=left]::after {
left: 0;
top: 50%;
}

[data-tooltip][data-tooltip-position=left]::before {
transform: translateX(calc(-100% - 1px)) translateY(-50%) rotateZ(90deg);
}

[data-tooltip][data-tooltip-position=left]::after {
transform: translateX(calc(-100% - 0.5rem + 4px)) translateY(-50%);
}

[data-tooltip][data-tooltip-position=right]::before,
[data-tooltip][data-tooltip-position=right]::after {
left: auto;
right: 0;
top: 50%;
}

[data-tooltip][data-tooltip-position=right]::before {
transform: translateX(calc(100% + 5px)) translateY(-50%) rotateZ(270deg);
}

[data-tooltip][data-tooltip-position=right]::after {
transform: translateX(calc(100% + 0.5rem)) translateY(-50%);
}

@media (hover: none) {

[data-tooltip]::before,
[data-tooltip]::after {
    content: none;
}

}