The tooltip element is used to keep the interface simple by displaying an explanatory message when the user hovers over an item, providing additional information only when needed.
The Tooltip element is an interactive information bubble used to provide additional information about an item in the user interface. When the user hovers over the relevant item, the Tooltip appears and displays an explanatory message about the item. This allows the interface to remain uncluttered, while the necessary additional information is shown to the user only when needed.
To use this element, first drag the “Tooltip” element onto your page. Type the message you want to display in the “Title” field. Set the “Placement” field to “Bottom.” In the “Style” field of the “Styling” panel, select “Heading 4 Text” and “Heading 6 Text.” Place your “Image” element inside the Tooltip. Upload your image via the “Value” field and set the “ImageFit” field to “Fill.” In the Styling panel, set the “Width” to 100% and the “Height” to 250 px.
When the application is tested, the Tooltip element automatically appears when the cursor hovers over the image and displays a short text explaining what the image represents. The tooltip closes when the user moves the cursor away from the image. This structure provides users with quick and clear information without taking up additional screen space.
