Adding a tooltip on an element of your website allows to provide additional information to visitors without overloading the page.
If you do not know how to add a preset widget to an A/B test, read our article on the subject.
The preview box at the top of the configuration page is used to verify that the display meets your needs. It is updated in real time according to your modifications.
Select here the type of tooltip that suits you best: with or without arrow. This concerns the shape of the bubble. Test both possibilities and observe the impact in the preview box.
You can modify the formatting of the tooltip: the background color, the text color and the font size.
Finally, a toggle allows you to optionally set a maximum width: if the text is longer than the width of the bubble, it will be automatically returned to the line. By default, this option is disabled, but you can make it active by moving the button to “YES”.
Several types of tooltip display are available:
- On hover on an existing element;
- At the click on an existing element;
- When the page has loaded;
- When the item appears on the screen.
This toggle button gives you the possibility to limit the apparition time of the tooltip. By default, it is disabled but one click is enough to make it active. You can then specify the time (in seconds) beyond which the tooltip will disappear.
Display for devices
With a few simple clicks, you can decide on which devices you want to display your widget: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.
Note: You can also include or exclude devices when you create your segment.
Once the widget is added to your A/B test, you can of course associate the tooltip with a specific element and modify the text it contains directly via the editor.
Do not forget to click on “Save” to validate the creation of your widget!