To disperse little nuggets of information throughout your app, you can add a tooltip. You can either access them from a visual tag or highlight an element (while also greying out the background).
This allows you to:
Capture your user's attention with the (customizable) visual beacon
Give them guidance at the right place without needing to use a full guide or announcement
How to create a tooltip
Navigate to the guide's library and hit "Create new"
Choose Tooltip & Flows guide and hit "Next"
Choose tooltip
Once you press next you will be asked for a URL of where you want the tooltip. It will open up the visual builder experience.
Creating a visual tag
Enter the URL of where you want to create the visual tag in your app
Navigate to the correct page and click “Start Design” in the menu bar at the bottom of the editor experience.
Hover around and select the element you wish to append a tag to. Once selected, you’ll be able to choose from different visual styles, and tweak the placement of the tag and the tooltip which shows on hover
When you save, the tag will always save as a draft.
Editing your tooltip
Once your visual tag is created you can edit the content of your tooltip in our guide editor just like all other guides
You can include text, videos, GIFs, and photo's in the body of the tooltip, and also customize your CTA (or remove it) as needed
For a more accurate preview, you can view the tooltip and visual tag in your app by clicking "View in your app"
Triggering and designing your tooltip
You can control the size of your tooltip and how it shows up in the "Preview & Style" tab of your guide
Hover on the tag requires the user to hover over the visual tag for the tooltip to display
Page load will result in the tooltip popping open automatically when on the page where you placed your visual tag
Watch-outs:
You cannot embed a Bento guide in an iframe on your page. Otherwise, it can be placed anywhere, for example on your homepage or dashboard.
Bento's components are designed to be responsive for web.