Tooltips
How to add and style tooltips.
What Are Tooltips?
Tooltips are small, contextual messages or hints that appear when a user hovers over an element on a page, such as a button, link, avatar, icon, image, or card. They provide additional information, explanations, or instructions about the function or purpose of the element, helping users understand its functionality or significance.
Location in the Parts Library: Base Parts > Feedback > Tooltip
Why Are Tooltips Useful?
Tooltips parts are useful for several reasons. They can:
Clarify Functionality: Tooltips are useful for clarifying the purpose or functionality of interactive elements, especially when their purpose may not be immediately apparent to users. For example, a tooltip can explain what a particular button does or guide how to use a feature.
Reduce Ambiguity: Tooltips can help reduce ambiguity and uncertainty by providing users with additional context or instructions when interacting with complex or unfamiliar interface elements. This can improve user confidence and reduce the likelihood of errors.
Enhance Usability: Tooltips can enhance the usability of a page by offering quick, on-demand access to information without cluttering the interface with excessive text or labels. They provide a way to deliver supplementary information in a non-intrusive manner.
Highlighting Features: Tooltips can be used to highlight important features or functionalities of a website or application, drawing users' attention to specific elements and encouraging engagement.
Icons and Symbols: Tooltips are commonly used with icons and symbols that may not have obvious meanings, especially in navigation menus or toolbars. They help users understand the purpose of each icon and facilitate navigation.
Adding the Tooltip
Choose the tooltip most closely aligned with what you need from the Parts Library.
Choose your preferred tooltip variation, select the part where you’d like to add your tooltip and click ‘+ add to page’.
Styling the Clickable Part of the Tooltip
In the parts library, the clickable parts containing tooltips are mostly buttons, but we can also have tooltips from icons, images, links, cards, and avatars.
For Buttons:
Style the button by selecting it to open the property panel on the right, and using the Button Editors, style the button as needed for color, shape, size, and any other properties as needed. Update the text within the button.
For Avatars:
Style the avatar by selecting it to open the property panel on the right, and using the Avatar Editors, style the avatar as needed by replacing the image or text, and changing the color, shape, size, and any other properties as needed.
For Icons:
Style the icon by selecting it to open the property panel on the right, and using the Icon Editors, style the icon as needed by replacing the icon, and changing its color and size as needed.
For Images:
Change and style the image by selecting it to open the property panel on the right, and using the Image Editors, update the placeholder image with your preferred image. Change the size, opacity, and any other image properties as needed.
For Links:
Update and style the link by selecting it to open the property panel on the right, and using the Link Editors, update where the link goes. Edit the text within the link using the Text Editor. Change the size, font, and any other text properties as needed.
For Cards:
Update and style the card by selecting it to open the property panel on the right, and using the Card Editors, update the contents of the card.
Styling A Tooltip
The default background color of a tooltip is set to be your primary color. However, this is easily updated by opening the tooltip and selecting the tooltip part. This will open the property editing panel on the left, showing you the tooltip editors available.
The tooltip size can be set based on device size, and the foreground and background colors set.
Placement of the Where the Tooltip Opens
The tooltip can be positioned to open at the top, bottom, left and right of the part, and a range of combinations using the tooltip editor, and selecting 'Placement':
Editing the Contents of the Tooltip
Whilst it is most usual for the tooltip to contain a small amount of text for the purpose of providing a quick tip, the tooltip can contain whatever you want to reveal when the tooltip is clicked.
To add contents to the tooltip, select the 'Tooltip' part. This will open the tooltip property panel in the right menu. Add any parts from the part library to the tooltip. You will need to set the size of your tooltip, as it will expand based on how much content you have. Sizing can be
To edit the contents of the tooltip, select the part to be edited, which will open the relevant parts' property panel.
More information on Tooltips is coming soon.
Related Information
Last updated
Was this helpful?