@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).

Develop example of tooltip design pattern #127

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions