DescriptionSolutionDiscuss

Implement tooltip component

You are required to Implement an Tooltip component.

A tooltip is a floating, non-actionable informative label used to explain a UI element or feature. It's appears when users hover over, focus on, or tap an element.

This is initial structure of HTML:

<div data-tooltip="Name description">Hi, my name is John</div>

Requirements:

  • Show tooltip on hover on element with attribute data-tooltip
  • Maintain multiple tooltips per page
  • Take content of the toolitp from data-tooltip attribute. It could be HTML
  • Optimisations
    • Show tooltip with some delay, e.g. 500ms