CSS PLAY
Doing It With Style
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, .
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here.
Target
Using CSS Anchor Positioning W3C Working Draft, 4 October 2024 to position an element relative to another element, and @container to reposition the target pointer, recolor the background and change the target text.
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.
The tooltip changes background color depending on its position, which can be top/left, top/right, bottom/left and bottom/right.
It also upates the tooltip text to indicate its position and the pointer position.
So scroll the text vertically using the scrollbar to see the tooltip change position when it reaches to top of the box. You can also mve the text horizontally by resizing the browser window width.
The pointer is produced using clip-path:polygon.
This demo uses position-anchor: --my-anchor; and position-try-fallbacks: --on-bottom-right, --on-top, --on-left, --on-bottom-left; to reposition the tooltip, but this does not allow you to alter the pointer position or the text (see below #1). So I have updated the width of the tooltip by .1px for each @position-try (which is allowed) and used .holder {container: sidebar / size;} and @container (width:180px), @container (width:180.1px), @container (width:180.2px), @container (width:180.3px) to target the .holder p text, depending on its width, and update to suit.
See @container for more information.
#1
The @position-try rule only accepts the following types of CSS properties as values in its declaration list:
Inset properties: top, left, bottom, right, inset, inset-block, inset-inline, etc.
Margin properties: margin, margin-block, margin-inline, margin-top, margin-left, etc.
Sizing properties: width, min-width, height, max-height, inline-size, block-size, etc.
Note that the aspect-ratio property is not supported.
Self-alignment properties: align-self, justify-self, place-self
Position anchor properties: position-anchor, position-area
ALL DONE WITH JUST CSS.