<main>
<button popovertarget="tooltipA">Show tooltipA</button>
</main>
<dialog id="tooltipA" popover>
<button popovertarget="tooltipA">Hide tooltipA</button>
</dialog>
main [popovertarget] {
anchor-name: --trigger;
}
[popover] {
margin: 0;
position-anchor: --trigger;
top: calc(anchor(bottom) + 10px);
justify-self: anchor-center;
}
/* This also works, but isn’t needed
unless you’re using the display property
[popover]:popover-open {
...
}
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.