svelte-materialify icon indicating copy to clipboard operation
svelte-materialify copied to clipboard

Tooltip only works with elements that can function when surrounded by a div

Open atsepkov opened this issue 3 years ago • 1 comments

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.

atsepkov avatar Mar 18 '21 19:03 atsepkov

It does use an absolutely positioned span, don't know why it wraps the element at all.

Florian-Schoenherr avatar Mar 18 '21 20:03 Florian-Schoenherr