svelte-materialify
svelte-materialify copied to clipboard
Tooltip only works with elements that can function when surrounded by a div
Tooltip component wraps the element in a div
, which is not the correct approach. Typically in other UI libraries, tooltip element is implemented as an absolutely positioned div that can be re-rendered at the location of the element to which the tooltip is assigned, rather than generating a physical div
around the element. Current approach breaks when attempting to create a tooltip for elements that are part of a larger whole, for example:
- any element belonging to a
table
(th
,tr
,td
) - list entries (
li
,dt
,dd
) - select entries (
option
) - other elements I probably forgot about
I recommend a singleton tooltip element that repositions itself via event.target
coordinates.
It does use an absolutely positioned span, don't know why it wraps the element at all.