Develop example of tooltip design pattern

[mcking65]

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

[Veyfeyken]

Any chance this will go live in the near future? I'm looking for an accessible example to point to.

[Malvoz]

@Veyfeyken

While you are waiting for the w3c developers to design a tooltip pattern, you might want to have a look at @Heydon's tooltip component.

[ZoeBijl]

Work on this is being done on CodePen. You can also view the debug page which is a lot easier to navigate with AT.

Current open issues with the implementation:

• Doesn’t detect window bounds
• Doesn’t conform to WCAG 2.1 SC 1.4.13 Content on Hover or Focus

Any help is greatly appreciated.

[krixian]

@ZoeBijl It's looking good! Is there any description on how overflowing tooltips should behave?

[weboverhauls]

Yes, looking good! Would also be great to have a tooltip example on something other than a button such as a link/anchor, text input, and possibly regular text.

[mfairchild365]

@ZoeBijl that is a great example. One question immediately comes to mind: the example uses a <button> element to trigger the tooltip. Because the tooltip is automatically displayed when the button receives both hover and focus events, activating the button element doesn't actually do anything. My hunch is that users might find a button that doesn't do anything a bit confusing and unexpected.

As indicated in #128 the presence of a button might indicate a 'dialog toolip' pattern rather than a traditional tooltip.

In any case, I think it might be worthwhile to think about what the role of the of the element that triggers the tooltip should be (when the tooltip is not attached to a form control or another element that performs a separate action, and the tooltip content is shown on touch, hover, and focus events). My gut says that no role would be sufficient, but perhaps I'm way off base.

[ZoeBijl]

@ZoeBijl It's looking good! Is there any description on how overflowing tooltips should behave?

Do you mean when there’s more text than fits ion the tooltip?

Yes, looking good! Would also be great to have a tooltip example on something other than a button such as a link/anchor, text input, and possibly regular text.

That’s a good idea! I will add that.

@ZoeBijl that is a great example. One question immediately comes to mind: the example uses a <button> element to trigger the tooltip. Because the tooltip is automatically displayed when the button receives both hover and focus events, activating the button element doesn't actually do anything. My hunch is that users might find a button that doesn't do anything a bit confusing and unexpected.

Hmm, the buttons in the example would do something if they were implemented on a page. The heart/like button is what you’d find in Twitter’s UI for example. I can trigger some kind of alert to show that it did something. Would that clarify it?

As indicated in #128 the presence of a button might indicate a 'dialog toolip' pattern rather than a traditional tooltip.

In any case, I think it might be worthwhile to think about what the role of the of the element that triggers the tooltip should be (when the tooltip is not attached to a form control or another element that performs a separate action, and the tooltip content is shown on touch, hover, and focus events). My gut says that no role would be sufficient, but perhaps I'm way off base.

While tooltips can certainly be used for other things; their main usage would still be to clarify buttons/other controls no?

From @Heydon’s article:

Literally "tips for tools", they are little bubbles of information that clarify the purpose of otherwise ambiguous controls/tools.

As for the controls not triggering anything, I can look into that. I think if I add an action to them the tooltips won’t show anymore on touch devices (which also shows how useless tooltips are for UX patterns).