Tooltip

Owned by Bronwyn Hawkins (Deactivated), created
Jun 04, 2021
1 min read

Design complete IMPLEMENTATION PENDING

The three statuses above and their possible values:

PROPOSAL STATUS

DESIGN STATUS

IMPLEMENTATION STATUS

PROPOSAL STATUS

DESIGN STATUS

IMPLEMENTATION STATUS

DRAFT

DESIGN PENDING

IMPLEMENTATION PENDING

READY FOR REVIEW

DESIGN PLANNED

IMPLEMENTATION PLANNED

APPROVED TO ADD

DESIGN IN PROGRESS

IMPLEMENTATION IN PROGRESS

DEFERRED

DESIGN COMPLETE

IMPLEMENTATION COMPLETE

NEEDS CHANGES

Β 

Β 

For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-Start-a-component-proposal.

Tooltips display informative text when users hover over, focus on, or tap an element.

Contributors

@Bronwyn Hawkins (Deactivated)

Paragon Jira ticket

https://openedx.atlassian.net/browse/PAR-169

Design resources

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=5906%3A3514

Technical docs

1 Variants | 2 Best Practices | 3 Related Components | 4 Specification | 4.1 Behaviors | 4.2 Accessibility | 5 Notes

Design

Variants

  • Light and Dark palettes

  • Top, Bottom, Left and Right carat position

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=5906%3A3514

Best Practices

Do

  • Do use the Light variant on dark backgrounds

  • Do use the Dark variant on light backgrounds

  • Do let text inside the tooltip wrap if needed

Don't

  • Don't put links or interactive elements in tooltips

  • Don’t let the width of a tooltip exceed 300px

Related Components

Β 

Specification

What does an engineer need to know in order to build this component?

Redlined Design Spec

Β 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=5906%3A3533

Behaviors

Accessibility

Β 

Notes

Notes from collaborator conversations or meetings regarding this component.

XX.XX.20XX

Β 

Β