Multi Line Tooltip should point the arrow to the trigger element - Githubissues

db-ui / mono

DB UX Design System Monorepo - Provides Design Tokens and components for Web UIs

https://db-ui.github.io/mono/

Apache License 2.0

68 stars 9 forks source link

Multi Line Tooltip should point the arrow to the trigger element #3452

Open db-gspeck opened 2 weeks ago

db-gspeck commented 2 weeks ago

Which generators are impacted?

[x] All
[ ] HTML
[ ] React
[ ] Angular
[ ] Vue
[ ] Web components
[ ] Power Apps

Reproduction case

Hi Guys, the reproduction steps are the following:

Add a multi-line DbTooltip to an element.
Notice that the arrow is always in the center of the box.

Best Gregor

Expected Behaviour

The arrow should point to the trigger element

Screenshots

Screenshot 2024-11-12 102244

Browser version

None

Add any other context about the problem here.

please have a look to the Anchor CSS API :

https://developer.chrome.com/blog/anchor-positioning-api?hl=de https://caniuse.com/?search=anchor

Also the popover API can be useful in this case: https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/popover https://developer.mozilla.org/de/docs/Web/API/HTMLElement/popover

mfranzke commented 2 weeks ago

@db-gspeck thanks a lot for this issue. And I love that you're bringing up these new APIs; this was even already discussed and it's always nice to have some further advocacy on using those.