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:
- [CSS Triangle](https://css-tricks.com/snippets/css/css-triangle/)
- [a11y Style Guide - Tooltips](https://a11y-style-guide.com/style-guide/section-forms.html#kssref-forms-tooltips) - I used this to gut check and with some help with those transitions. 
- [Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)

https://app.egghead.io/api/v1/lessons/aria-create-an-accessible-tooltip-on-a-text-input/subtitles

Create an Accessible Tooltip on a Text Input

Instructor: [0:00] Today, we're going to take this name text field and add a tooltip to describe how we're formatting it. In the html, we have a form. We have an accessible label with the intertext name. We have before attribute equals name. We have a span with the class a11y/input/tooltip. We have an input with the type text and it has an ID with name which matches the four of that label.

[0:28] The first thing we want to do here is we want to actually have that markup available to us. Next to the input, using EMET, I am going to create a span with the ID of a11y/tooltip. Inside of those tags, I am going to say, "Please write your first and last name."

[0:46] Now if we refresh that, we just have that text there. To make this a tooltip though we have to add a few more things to make it semantic. First, on the span that we just created, we are going to create a role=tooltip. On the input, we are going to have an Aria described by attribute. That's going to match the ID of the span of the tooltip.

[1:10] While this doesn't do anything visually for us, what happens is on the screen reader, once we focus on this, it will describe afterward, "Please write your first and last name."

[1:21] Now that we have that, let's add some styling to that tooltip. First, I am going to use the tooltip attribute to style list. I am going to have my square brackets, role="tooltip," and those curly braces. Background color is going to be primary dark and the color is going to be the primary light variable. There we go.

[1:43] I am going to add a little bit of padding there. It's going to be padding .5 Aria to .75 Aria, then I am going to add a border radius of five pixels. Now, I am going to add a position relative to this tooltip. That way, we can create an after-pseudo element with a content property that equals a blank string, then we're going to position that absolute.

[2:08] I am going to copy and paste some CSS that I found on CSS Tricks for a triangle. Great, we have that little triangle there. Now that that's there, we want to make sure that it's opening and closing when we hover over it or when we focus on it.

[2:22] The first thing we're going to do is we're going to do a visibility hidden here. Crush that. Now, it will be hidden. In that input type text, I am going to add a focus pseudo class. I am going to do something naughty and take out the outline. That's because I am going to replace it with something else.

[2:41] Now, we focus on it. We got that little shadow. I'm also going to use that to create a hover style. Now if I hover over it or focus on it, it works. But what isn't happening is the tooltip isn't showing. What we have to do is add a combinator. We are going to do a sibling combinator for that role=tooltip. Then we are going to do visibility, visible. Now that shows.

[3:13] I'm just going to add a little bit of styling finesse here. I'm going to also set the opacity to zero. Then I'm going to do a transition property. It is going to be on the opacity property. I am going to have that opacity last .2 seconds and have a 1-second delay, and then ease in out. On this focus tooltip, we are going to have opacity=1.

[3:40] Now let's take a look. Let's focus on it. Then it appeared just a second later. However, this is all moot if it doesn't work on a screen [inaudible] . Let's test that out.

Voiceover: [3:50] Voiceover on Safari. Egghead a11y tooltips window. Egghead a11y tooltips web content has keyboard name. Add a text. Please write your first and last name. You are currently on a text field inside of Web content. To enter text in this field, type. To exit this...Voiceover off.

Instructor: [4:05] As you noticed, it told us the name of the field and then it said, "Please write your first and last name." To summarize, we have a span that we created the tooltip. It has a role of tooltip and an ID of a11y-tooltip. There's an Aria described by on that input with the matching a11y-tooltip of that ID of the tooltip. Then we use the focus styling to show the tooltip.

Create an Accessible Tooltip on a Text Input

Share this video with your friends