#Variations
There are two types of tooltips — standard and dismissible. Both types can either show or hide the tip point. Standard tooltips can be closed by either moving the cursor or selecting anywhere outside of the tooltip area. Dismissible tooltips can only be closed by selecting the close icon.
#Placement
Tooltips can be placed to the top, bottom, left or right of their related content. For top or bottom tooltips, the placement can be more specifically aligned to top left, top right, bottom left or bottom right. Additionally the placement can be set to automatically adjust position to avoid being cut off by a container or browser edge.
#Guidelines
- Avoid hiding essential content within a tooltip.
- Tooltips should not overrun container boundaries or pages.
- Do not use for long text, instead use ❖ #Popover.
- Do not include rich content such as videos or photos.
- Do not display multiple tooltips simultaneously.
You can find Design System • Yellow file in Figma here 👉 https://www.figma.com/community/file/1312130033201614801/design-system-yellow
I would love to hear your feedback.
Please share your thoughts with me.
