Become a member
to unlock all features

Create egghead account to access 1,000+ tutorials and resources from expert developers.

Create account

    Create an Accessible Tooltip on a Text Input


    Here we use HTML and CSS to create a stylish yet semantic tooltip on a form input. I am using aria-describedby to create a relationship with the input and the tooltip. Then I use CSS to style the tooltip and control when it appears or disappears both on hover and focus.

    In this video, we use VoiceOver. To test that on a MacOS, use CMD + F5.

    A few resources: