Tooltip

Published on February 04, 2021, updated on September 13, 2023

If you want to add any additional information in relation to something, but don't want to clutter your portal with information, then this is for you. The Insites Tooltip component allows you to display informative text when users hover over, focus on, or tap an element.

Figma Component Variant Properties

Tooltip Label
Properties Options Notes
Shape Circle, Rectangle Select the shape to use for the component.
Hover True, False Toggle to use the default or hover state of the component.
Show Label True, False Toggle show the text label for the component. This option is only available if Rectangle is selected for the Shape property.
Show IconTrue, FalseToggle show the icon for the component. This option is only available if Rectangle is selected for the Shape property.

Tooltip Content

Properties Options Notes
Position Top, Right, Bottom, Left Select the display position of the component.
Show Text ContentTrue, FalseToggle to show the text content for the component. This should be disabled if you enable the Show Custom Content property.
Show Custom ContentTrue, FalseToggle to show or hide the custom content for the component. This should be disabled if you enable the Show Text Content property.
Custom Content-Select the content you want to use for the tooltip. This property is not available if Show Custom Content property is disabled.
Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.