Draft tooltip design pattern

[mcking65]

The tooltip design pattern is at: http://w3c.github.io/aria-practices/#tooltip

It is largely complete. Things to fix include:

• [x] Redundant wording and incomplete sentences in the description.
• [x] The keyboard section needs revisions to bring it inline with APG editorial requirements.
• [x] The states and properties section needs revisions to bring it inline with APG editorial requirements.
• [x] Remove external links from example section. page.

Open questions:

• [ ] Should there be any guidance about using tooltip verses title attribute.
• [ ] The introduction links to the non-modal dialog section. Should that instead be to the tooltip dialog pattern called for by issue #85?

[smhigley]

Thanks @accdc for that writeup and the examples! I tried to condense those + some of my thoughts into a potential outline of examples for the tooltip design pattern. I'd be curious what you (and everyone else) think about it:

1. A section on "traditional" tooltips (i.e. tooltips that appear only on hover and focus)
   • Example 1: an icon button with a tooltip showing the text alternative
   • Example 2: a short text description on an input field
   • I think we should also include text here on the accessibility pitfalls of both those tooltips in addition to information on how to make them as accessible as they can be. That can lead into suggesting toggletips as alternatives in the next section (and maybe mention including a legend as an alternative for inaccessible icon tooltips)
2. A section on toggletips
   • Example: a button that opens and closes a toggletip with help text for a form field
   • Some info on why they're a good alternative to traditional tooltips
3. Toggletips, but they're actually non-modal dialogs with interactive content
   • Example 1: this is sometimes called a "teaching tip", essentially a non-modal dialog with more info on how to use an interface, usually with buttons and links inside it
   • Example 2: A toggle tip for a form field, but with a link inside it
   • This functionally isn't that different from a text-only toggletip, but I think it's worth specifically calling out the a11y considerations of putting interactive controls inside what people colloquially call "tooltips"

I didn't include the error tooltip or tooltip with dynamic content because while I think the work on notifications is really interesting, it doesn't seem relevant to the tooltip pattern. It seems like they'd fit better into a section on how to author notifications and live regions (which we should also add 😄). I also think they'd do better as inline text rather than tooltips -- the live region considerations would be the same, but then they don't have any of the UX problems introduced by tooltips.

One other thing is I think we should consider control as a dismiss key in addition to escape because tooltips show up within dialogs, non-modal popups, menu dropdowns, and even combobox dropdowns with depressing regularity. If escape is standardized as the one single dismiss key, it'll cause problems in all of those cases.

[smhigley]

Notes from the meeting on 8/17:

Example brainstorming:

• example of double-tooltip: info and error on the same input at the same time (had pushback on showing this as an example, question of whether it's actually a common enough pattern to warrant showing it + it has a lot of drawbacks)
• Show both an icon button toolbar w/ tooltips and a single icon tooltip
• form field tooltip
• toggletips and non-modal dialogs
• Need to make sure it's clarified that a toggletip is not a tooltip, and be very clear on which examples don't use the tooltip role

Guidance section:

General guidance section:

• clearly define traditional tooltip, and what that is vs. toggle-tips/dialogs
• a traditional tooltip supposed to replicate the host tooltip/title attribute
• that's why there's no interactive content or structured content in a tooltip
• segue to next section: if you need anything that couldn't be covered in a title attribute, you also shouldn't put it in a custom tooltip. You'd actually want toggletip/dialog

Behavior:

• dismiss on delay: stay away from auto-dismissal entirely -- because if APG shows it, people will complain that their tooltip fails WCAG. APG should not show WCAG-failing examples (Scott, Eric, Jerra all agree)
• dismiss on ctrl AND escape (optional) in our example, specify why escape has issues (e.g. in a modal)
• (OPTIONAL): delay to show (browsers do)
  • two examples, toolbar w/ bunch of icon buttons = delay, tooltip on form field = no delay
  • needs note that explains why optional, why one person might want a delay but another might not, but be internally consistent
• Touch:
  • apple has done some work on this, e.g. first tap shows tooltip, second performs action
  • apple again: title attribute shows on long press (don't think we can replicate this?)
  • should we actually do the one touch to show tooltip, second to perform action (straw poll: don't do this, seems counterintuitive)
  • Suggestion: show the tooltip on touchstart, dismiss on touchend
• Voice: doesn't work with this
• Need to check with reader view, HCM (e.g. does a tooltip get inserted into the text in reader mode? Does using HTML hidden fix it if it does?)
• Doesn't work on a static element either, need to specify that it's bad practice and why (keyboard triggering and screen reader support). Good place to note that one would need a toggle tip instead.

[DavidMacDonald]

I noticed that screen readers don't seem to announce the role tooltip on this type of example

<button ... aria-describedby="p1">...</button>
<div role="tooltip" id="p1"...>Lipsum...</div>

Or this

<button ... aria-labelledby="p1">foo</button>
<div role="tooltip" id="p1"...>Lipsum...</div>

Also our working example has aria-labelledby and in that case it overrides any text in the button so in that case either use aria-describedby or have 2 ids in the labelledby, the button self reference and the tooltip

<button ...  id="p1" aria-labelledby="p1 p2">foo</button>
<div role="tooltip" id="p2"...>Lipsum...</div>

[JAWS-test]

@DavidMacDonald

With which browser and screen reader does it not work? I have checked the examples with JAWS and NVDA and they work

[tychenjiajun]

If the related element is not visible, should we close the tooltip?

[mbgower]

@tychenjiajun this is a very long thread. Can you please cite the prior comment you are referring to, or provide some more context?

If the related element is not visible, should we close the tooltip?

[tychenjiajun]

@tychenjiajun this is a very long thread. Can you please cite the prior comment you are referring to, or provide some more context?

If the related element is not visible, should we close the tooltip?

Reakit Tooltip is a tooltip component that claims to follow this pattern. However, it has weird behaviour. When I tab on a reference to open the tooltip, then scroll the page's scrollbar using the mouse until the reference becomes invisible, the tooltip is still visible. Should scrolling dismiss the tooltip?

[mbgower]

@tychenjiajun said:

However, it was weird behaviour. When I tab on a reference to open the tooltip, then scroll the page's scrollbar using the mouse until the reference becomes invisible, the tooltip is still visible. Should scrolling dismiss the tooltip?

No, it should not be dismissed, and I wouldn't consider that weird. It seems to follow the guidance: you tabbed to it, so you have put focus on it, and scrolling the page is not removing focus from the reference. If you had triggered the tip with the mouse, then scrolling away would move the pointer off the reference, which should cause it to go away. But once invoked by focus, it's going to stay there until focus is lost.

This Note might help:

Focus stays on the triggering element while the tooltip is displayed. If the tooltip is invoked when the trigger element receives focus, then it is dismissed when it no longer has focus (onBlur). If the tooltip is invoked with mouseIn, then it is dismissed with on mouseOut.

[Gcamara14]

Any updates on this tooltip? This tickets been open for quite sometime.

https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/

[mbgower]

@tychenjiajun, I just had a look at the Reakit tooltip you have now linked to in your comment, instead of just reading the behaviour you described. I see what you're talking about. I think what's happening is that this tip's behaviour is colliding with a few other things on this page:

1. They have a floating banner which obscures content, however the tooltip seems to be on a layer above this banner, so while the trigger for the tooltip becomes hidden under the floating banner, the tooltip stays visible on top
2. They have some dynamic positioning of the tooltip, which responds to the viewport edge, and so moves the tooltip below the trigger as the trigger gets near the top of the page. It makes the tooltip reposition over top of the banner as a user scrolls

I think those are both problems with the banner implementation, not with the tooltip. I guess the one thing that could be investigated is if the styling that is putting the tooltip over other content could result in other page oddities with regard to the tooltip display. Worth Reakit testing. I'm a little surprised to see the tooltip dynamically reposition based on other content. Some people may like that. Some may not. I would have thought it was stay stationary once appearing. But I don't think the reposition would be considered a failure of anything?

[clshortfuse]

Microsoft Windows closes tooltips with Ctrl not Escape. I have bigger writeup at #2538 specifically addressing this.

Key points are: "Escape" is irregular. We lack a general pop-up ARIA for "rich" popups. Tooltips should not be "rich".

[cseas]

We have a use-case where we want to show the tooltip for a few seconds on initial page load and automatically dismiss it. After that the tooltip goes to regular behaviour and only appears on hover. Is this usage against the tooltip design pattern UX?