Tooltip

[idoros]

This PR add a tooltip component.

• [x] pure logic implementation
  • open & close triggers
    • focus (just to initiate open)
    • blur to close (only when mouse is out)
    • mouse over triggering element
    • mouse within opened layer keep tooltip open
    • ~esc to close~ - will be added in a separate PR
  • open & close delay
  • open at the top with auto overflow control
• [x] React component
• [x] Svelte component

Leftovers:

• feature: position, size & overflow abilities
• feature: catch escape on top layer
• accessibility, caveats & research:
  • in most cases, touch users trigger focus/hover, but also trigger click, eliminating the possibility of getting a label/description without causing the action
  • should tooltip prevent focus & selections on overlay? should tooltip only contain simple text? (I assume there is another component popupMenu or tooltipDialog to allow a more persistent anchored overlay)
  • how screen readers get the content of a tooltip on an element that doesn't accept focus?
  • tooltip on a disabled element will work for mouse, but not for screen reader, also should tabbing into a disabled button tooltip be allowed?
  • move between anchor and overlay is maintained with an adjustable delay by the developer using the component. there should be some best practices for users that needs more time or even better, a default that takes some user preferences into account.
  • tooltip should be readable on focus - might want to always render it and then move it in the DOM or copy it for visual representation (need more research on what should be used: aria-labelledby/aria-label/aria-describedby/live region)
  • need to keep track on (https://www.w3.org/TR/wai-aria-practices/#tooltip & https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus)