I need a tooltip, with a pointer; but it seems that the current state of the spec does not allow for pointers; and most explainers studiously avoid this use case, as if this isn't a lion's share of what people do with anchored floating boxes.
[0] - https://spectrum.adobe.com/page/tooltip/
[1] - https://shoelace.style/components/tooltip
[2] - https://ui.shadcn.com/docs/components/tooltip
[3] - https://popper.js.org/docs/v2/modifiers/arrow/
[4] - https://primer.style/product/components/popover/guidelines/
https://react-spectrum.adobe.com/react-aria/Tooltip.html#exa...
One killer feature of CSS anchor positioning is that it allows you to declaratively define fallback positions if the floating element does not fit into the preferred position. For example, you prefer your tooltips to appear below the anchor; but if the anchor happens to be at the bottom of the screen, there is no space below it, and so the floating element can flip to the top.
After the flip, the triangular svg will be pointing in the wrong direction.
...do you mean you want a rich-HTML tooltip that is auto-positioned to ensure it's fully visible w.r.t. the browser's viewport but you also want the tooltip (or UI in general) to include an arrow shape that stays fixed on-target even if might be occluded by the browser?
An arrowhead pointing at the anchor element.
Example: https://en.wikipedia.org/wiki/Tooltip#/media/File:Mobile_URL...
UPD: In spec speak, these are called tethers. The anchoring indicators
https://fantasai.inkedblade.net/style/specs/css-anchor-explo...