4 ms·

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 cas

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.

DaiPlusPlus 1y ago
I'm unsure what you mean by "pointer" - normally that just refers to the user's mouse cursor on-screen... ...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?
- azangru 1y ago
  > I'm unsure what you mean by "pointer" An arrowhead pointing at the anchor element. Example: https://en.wikipedia.org/wiki/Tooltip#/media/File:Mobile_URL_tooltip.png 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-exploration/#tethers https://fantasai.inkedblade.net/style/specs/css-anchor-explo...
codingdave 1y ago
Tooltips are normally visible on hover, so the pointer is your cursor. I've never added an additional arrow pointing to the element, nor had any designers ask me to do so. So I'd disagree that such a design is the "lion's share", but am curious what types of apps you create where you do find it to be so?
- edoceo 1y ago
  They are using a stylized floating DIV (or something) not the built-in thing from the title attribute. Lots of design teams seem to want this, for consistency.
- azangru 1y ago
  Someone in a comment below posted a link to Adobe Spectrum design system [0]. You will find similarly shaped tooltips in Shoelace [1], or shadcn [2]. The Popper library has it [3]. Github's design system has it (they call it popover) [4]. It's an extremely common design pattern. [0] - https://spectrum.adobe.com/page/tooltip/ https://spectrum.adobe.com/page/tooltip/ [1] - https://shoelace.style/components/tooltip https://shoelace.style/components/tooltip [2] - https://ui.shadcn.com/docs/components/tooltip https://ui.shadcn.com/docs/components/tooltip [3] - https://popper.js.org/docs/v2/modifiers/arrow/ https://popper.js.org/docs/v2/modifiers/arrow/ [4] - https://primer.style/product/components/popover/guidelines/ https://primer.style/product/components/popover/guidelines/
johtso 1y ago
Think a common approach is to just display a triangular svg beneath the tooltip: https://react-spectrum.adobe.com/react-aria/Tooltip.html#example https://react-spectrum.adobe.com/react-aria/Tooltip.html#exa...
- azangru 1y ago
  > Think a common approach is to just display a triangular svg beneath the tooltip 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.

DaiPlusPlus 1y ago

I'm unsure what you mean by "pointer" - normally that just refers to the user's mouse cursor on-screen... ...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?

azangru 1y ago
> I'm unsure what you mean by "pointer" An arrowhead pointing at the anchor element. Example: https://en.wikipedia.org/wiki/Tooltip#/media/File:Mobile_URL_tooltip.png 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-exploration/#tethers https://fantasai.inkedblade.net/style/specs/css-anchor-explo...

codingdave 1y ago

Tooltips are normally visible on hover, so the pointer is your cursor. I've never added an additional arrow pointing to the element, nor had any designers ask me to do so. So I'd disagree that such a design is the "lion's share", but am curious what types of apps you create where you do find it to be so?

edoceo 1y ago
They are using a stylized floating DIV (or something) not the built-in thing from the title attribute. Lots of design teams seem to want this, for consistency.
azangru 1y ago
Someone in a comment below posted a link to Adobe Spectrum design system [0]. You will find similarly shaped tooltips in Shoelace [1], or shadcn [2]. The Popper library has it [3]. Github's design system has it (they call it popover) [4]. It's an extremely common design pattern. [0] - https://spectrum.adobe.com/page/tooltip/ https://spectrum.adobe.com/page/tooltip/ [1] - https://shoelace.style/components/tooltip https://shoelace.style/components/tooltip [2] - https://ui.shadcn.com/docs/components/tooltip https://ui.shadcn.com/docs/components/tooltip [3] - https://popper.js.org/docs/v2/modifiers/arrow/ https://popper.js.org/docs/v2/modifiers/arrow/ [4] - https://primer.style/product/components/popover/guidelines/ https://primer.style/product/components/popover/guidelines/

johtso 1y ago

Think a common approach is to just display a triangular svg beneath the tooltip: https://react-spectrum.adobe.com/react-aria/Tooltip.html#example https://react-spectrum.adobe.com/react-aria/Tooltip.html#exa...

azangru 1y ago
> Think a common approach is to just display a triangular svg beneath the tooltip 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.