The tooltip widget adds a pulse/hotspot to your video. When a viewer hovers over this pulse, a tooltip appears that can be customized to contain additional information and even buttons!
In this article we’re going to take you through how you can add and customize the tooltip widget in your videos.
Adding a Toolip to your video
1. Start by creating a new video, or cloning or editing an existing video.
2. Within your video, navigate to the time frame where you’d like to add your tooltip.
3. From the right hand side panel, click on Advanced components and then click on the tooltip widget to add it to your canvas.
4. A pulse/ hotspot with a tooltip will appear on your video canvas. You can drag the edges of the pulse to resize it.
5. You can drag the pulse to your desired position on the canvas.
6. From the components manager, below the canvas, adjust the start and end time frame for which you want the pulse to appear within the video.
Let’s take a look at how you can configure the properties and appearance of this tooltip.
Tooltip Properties
Once you add a tooltip to a video, its corresponding properties will open to the right of the canvas. You can expand each property header to configure related settings. Let’s take a look at each of them:
Size:
You can adjust the width and height of the pulse/hotspot from here, by logging their corresponding values. You can also directly drag the corners of the pulse, within the canvas, to resize it.
Position:
You can adjust the position of the pulse, by entering the respective left and top (x and y) coordinates under the position tab. You can also adjust the position by dragging the pulse to the desired spot on the canvas.
Pulse:
You can expand the pulse option to edit the color that you would like the pulse to take. Click on the color block and then simply select the color of your choice.
Tooltip Title:
Under tooltip title, you can configure the title text that appears when the tooltip is expanded. You can also determine the font settings such as style, color, size, spacing and alignment from here.
Tooltip Description:
Under tooltip description, you can configure any additional content (that appears under the title) within the tooltip. In our demonstration, we have entered the product price here, however you can replace that with textual information as well.
Similar to the tooltip title, you can also configure the font settings such as style, color, size, spacing and alignment from here.
Button settings:
Under button settings, you can configure the text and appearance of the button that sits within the tooltip. Type in your desired button title. You can adjust the corresponding font style, size, spacing, weight and alignment from here. You can also adjust the font color, by clicking on the font color block and selecting the color of your choice.
Additionally, you can adjust the button background color by clicking on the corresponding color block and selecting your desired background color.
Under Link you can specify the webpage that you would like the viewer to be redirected to when they click on the button within the tooltip
Tooltip Card:
Under the tooltip card, you can adjust the size of the tooltip by entering or adjusting the value of its width. The height of the tooltip will automatically adjust accordingly
Tooltip Avatar:
Under tooltip avatar, you can configure the image that appears within the tooltip, when expanded. This could be a product image, logo, profile image etc.
To configure this image, click on Upload Image. From the media gallery modal, you can select either of the following options:
1. Click on Click to Upload to select an image from your files
2. Click on Browse Stock Images to choose an image from our stock library
3. Select one of the existing images within the Media Library and click on Okay to confirm.
Under Width you can set the size of the image. The height automatically adjusts
You can also customize the tooltip avatar to display a unique image for each recipient. That is, how you can set a personalized image variable as the tooltip avatar. Please have a look at the linked article for steps to guide you through this.
Interaction Tool:
Under the Interaction tool, you can see 2 available options - Pause and Checkpoint. Pause and checkpoint settings for an interaction determine the video behaviour before the interaction is executed. Let’s take a closer look at each of these:
1. Pause: If you check the pause option, you will also be prompted to enter a duration for which the video should pause.
In the case of a pulse/hotspot added to a video, the pause setting will pause the video for the stipulated duration. In this duration, the viewer can hover over the pulse to expand the tooltip and click on the button to execute the interaction
After the pause time has elapsed, the video will continue to play regardless of whether the user has interacted with the hotspot.
In our demonstration below, we have set the duration to 5 seconds. Hence the video will pause for 5 seconds at the end of the timeframe of the pulse widget, while it waits for an action to be performed. At the end of 5 seconds, the video will resume and continue.
2. Checkpoint: for a pulse/hotspot added to a video, the checkpoint setting will halt the video when at the end of the timeframe for the pulse. The video will not move forward until the tooltip is expanded and the button within is executed.
3. Pause with duration 0 seconds: A final scenario can be where you set the Interaction tool to pause but set the duration to 0.
In this case, the video will not pause at the end of the pulse/hotspot’s timeframe and will continue to play regardless of the viewer’s actions.
However, if while the pulse is in the video, a viewer hovers on it, the tooltip will become visible and the background video will pause. The viewer now has the choice to click on the button. If the viewer removes their cursor from the pulse, the video will continue to play as designed.
Your tooltip widget is ready! Ensure you click on Save Template to confirm any changes.
Experiment and create amazing videos for your audience! You can learn about other advanced widgets in the linked article.