Using CSS Anchor Positioning W3C Working Draft, 4 October 2024 to position an element relative to another element.

See The CSS anchor positioning API for more information.

For this demonstration just click/tap the 'ANCHOR' text to show the tooltip text which is 'anchored' to the 'ANCHOR' text.

Then you can move the 'ANCHOR' text around the container using just CSS (NO Javascript or jQuery) to see how the tooltip text reacts when it gets to the edge of the containing box.

Just click the joystick image to see a ne/sw cursor and hold this down while you move the mouse in any direction.

The 'ANCHOR' text and tootltop will move to follow the mouse.

As it approches the top and right edges the tooltip will reposition itself so that it stays within the box and readable.

ALL DONE WITH JUST CSS.