Poptips and Popovers

Poptips (a.k.a. Tooltips)

Use poptips to provide additional, non-essential information to users, such as explanatory help text. Poptips should only be 1–2 sentences in length, and should not contain links, buttons, images, interactive elements, or formatted text (titles, bolds, italics, etc.). If you need to provide more than a couple of sentences of content, or want to include links, you should revise your content, or reconsider using a tooltip at all. Alternatively, consider using a Popover.

OUI docs for poptips

Sample poptip.

Good Examples

Example of a good poptip on a help bubble.

This poptip uses short text and doesn't contain links or any other elements.


Example of a good poptip on an icon.

This poptip is a label for this icon button.

Bad Examples

Example of a bad poptip that's too long.

This poptip's content is way too long, and includes styled text and images. You should just link to a Knowledge Base article with this content instead. It’s also styled as a popover even though it appears on hover.


Example of a bad poptip that has a link in it.

This poptip's length is appropriate, but it should not contain a link.

Popovers

Use popovers to provide secondary actions and information to users, such as longer explanations with links to the Knowledge Base or buttons for additional functionality. Because it hides functionality, you shouldn't use them often. But it's great for providing contextual functionality that would otherwise make the interface too cluttered or repetitive.

OUI docs for popovers

Example of a popover.

Good Examples

Example of a good popover.

This popover opens on click to reveal additional functionality that doesn't fit in the main UI.