UNPKG

optimizely-oui

Version:

Optimizely's Component Library.

32 lines (16 loc) • 1.78 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# Poptips ## 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. ![alt text](http://design.optimizely.com/assets/img/design-patterns/product/poptips-and-popovers/poptip.png "good example of Poptip component") ## Good Examples ![alt text](http://design.optimizely.com/assets/img/design-patterns/product/poptips-and-popovers/poptip-example-good-help.png "good example of Poptip component") This poptip uses short text and doesn't contain links or any other elements. --- ![alt text](http://design.optimizely.com/assets/img/design-patterns/product/poptips-and-popovers/poptip-example-good-icon.png "good example of Poptip component") This poptip is a label for this icon button. ## Bad Example ![alt text](http://design.optimizely.com/assets/img/design-patterns/product/poptips-and-popovers/poptip-example-bad-long.png "bad example of Poptip component usage") 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. --- ![alt text](http://design.optimizely.com/assets/img/design-patterns/product/poptips-and-popovers/poptip-example-bad-link.png "bad example of Poptip component usage") This poptip's length is appropriate, but it should not contain a link.