This task aims to implement tooltips for the Top Navigation button for readability and accessibility

ACs

• Top Nav buttons change the background color from white to grey on the mouse hovering
• While mouse hovering each Top Nav buttons a tooltip indicating what each button/icon means will show up
• The tooltip behaviour
  • Wait 0.3–0.5 second after the mouse cursor enters target area before showing tooltip
  • If the mouse cursor remains stopped within target area, display tooltip content within 0.1 second
  • Keep displaying tooltip until the cursor has left the triggering target area or the exposed content for longer than 0.5 seconds.

Designs

• Screen mockup
• Component