Anchor name - unique in tree

by tikosar

HTML

<div class="has-tooltip box">
	Hover over me and see the tooltip
	<div class="tooltip">I am a tooltip for the 1st element</div>
</div>

<div class="has-tooltip box">
	Hover over me and see the tooltip
	<div class="tooltip">I am a tooltip for the 2nd element</div>
</div>

<div class="box" aria-label="I am an aria-label tooltip">
	Hover over me and see the tooltip
</div>

CSS

.has-tooltip:not(:hover) .tooltip,
[aria-label]:not(:hover)::after {
	visibility: hidden;
}

.box {
	margin-bottom: 50px;
	width: max-content;
	background: hotpink;
}

.has-tooltip,
[aria-label] {
	anchor-name: --tooltip;
}

.tooltip,
[aria-label]::after {
	background: cyan;
	position: absolute;
	anchor-default: --tooltip;
	position-fallback: --tooltip-fallback;
	top: anchor(bottom);
	left: anchor(center);
	translate: -50%;
}

[aria-label]::after {
	content: attr(aria-label);
}