The Tooltip widget is part of the Promotional Content widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.
Introduction
The Tooltip widget lets you display a tooltip on one or more elements.
Tooltips are useful in many different situations: as soon as you notice friction points, you can start improving by adding a simple tooltip. Very often, this will quickly relieve users of a painful experience or upgrade a confusing interface.
Configuration
Layout tab
- Select the element which you want to trigger and display a tooltip on.
- Select the position which the tooltip is displayed on: left side, right side, top, bottom. Default is top.
- Select the most suitable layout depending on the design of your web app or the amount of text you need to provide in your tooltip: "Simple" or "Rich".
Content tab
- Type a Title in the "Title" text area.
- If you've selected the "Title & Text" layout in the layout tab, add a text in the "Text" text area.
Style tab
- The Text color will be applied to both Title and Copy. We recommend picking a light color.
- The Background color is black by default. We recommend picking the most contrasted background based on your text color. If most of your website has a light background, use a dark color for your tooltip backgrounds. A tooltip must be clear and very readable.
- Border color, thickness, and radius settings will help you adapt the tooltip to your website style and make it seamless.
- Drop shadow and drop shadow blur radius: you can decide to add a drop shadow and adjust its opacity.
Background can be set up with an image using the image-fitting policy
4 options are provided:
- "Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
- "Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
- "Fill": the image is resized to fill the background container without keeping the aspect ratio
- "None": the image is left unchanged.
Conditions tab
You can choose whether you want to display your tooltip when clicking or hovering (hover does not work on touch devices).
You can choose to display the tooltip by default at page load. We do not recommend using several tooltips, as this can quickly become overwhelming and stressful for your visitors.
You can choose whether the tooltip will be displayed only once per page or every single time the trigger is triggered.
You can use the Tooltip widget as a pseudo-onboarder and add several in one page. In this case, we recommend triggering each one only once per page. This way, once the visitor has finished clicking in the different "new" areas, they can start really using the website without making the tooltips pop again.
If you use tooltips as legends for images, links, etc., we recommend not limiting the trigger to once per page.