Tooltip
Non-actionable, brief informative message or tip. Tooltips are user-triggered to give extra information that is contextual but not critical to a user’s journey. Tooltips are initiated in one of three ways: hover, focus or press.
On this page
Interactive Demo
This demo lets you preview the tooltip component, its variations, and configuration options.
For examples of all variants, please visit Storybook.
Component Variations
There are two tooltip variations.
1. Tooltip
A user triggered way to deliver information to a user. Tooltip can be paired and triggered by any button in the system. Use to give users extra information that is contextual but not critical to a user’s journey.
2. Info Tooltip
A user triggered way to deliver additional information to a user with a consistent signifier. Info tooltip can only be used inline. Info tooltip is triggered by icon button with the info icon. Use to give users extra information that is contextual but not critical to a user’s journey.
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.