Tooltips
How to add and style tooltips.
Last updated
Was this helpful?
How to add and style tooltips.
Last updated
Was this helpful?
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
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.
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’.
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.
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 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':
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 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.
Style the button by selecting it to open the property panel on the right, and using the Button Editors, style the as needed for color, shape, size, and any other properties as needed. Update the text within the button.
Style the avatar by selecting it to open the property panel on the right, and using the Avatar Editors, style the as needed by replacing the image or text, and changing the color, shape, size, and any other properties as needed.
Style the icon by selecting it to open the property panel on the right, and using the Icon Editors, style the as needed by replacing the icon, and changing its color and size as needed.
Change and style the 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.
Update and style the by selecting it to open the property panel on the right, and using the Link Editors, update where the link goes. Edit the within the link using the Text Editor. Change the size, font, and any other text properties as needed.
Update and style the by selecting it to open the property panel on the right, and using the Card Editors, update the contents of the card.
The tooltip can be set based on device size, and the foreground and background set.
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 of your tooltip, as it will expand based on how much content you have. Sizing can be
Buttons
Icons
Links
Text
Customizing and formatting
