---
title: Tooltip
description: Add the Tooltip component to any ad format, to offer suggestions and tips when users hover over or click on an area within an ad unit.
---
[Skip to content](https://help.adventive.com/en/knowledge/tooltip#main-content)
[.svg)](https://adventive.com)
Open main navigation
Close main navigation
Hello. How can we help?
- There are no suggestions because the search field is empty.
1. [Knowledge Base](https://help.adventive.com/en/knowledge)
2. [Building Ads](https://help.adventive.com/en/knowledge/building-ads)
3. [Rich Media Components](https://help.adventive.com/en/knowledge/building-ads#rich-media-components)
# Tooltip
## Add the Tooltip component to any ad format, to offer suggestions and tips when users hover over or click on an area within an ad unit.
**Resources:**
[Explore our Ad Gallery for examples of this component](https://adventive.com/html5-ad-gallery/?jsf=jet-engine:jet-smart-filters&meta=included-components!is_custom_checkbox:Hotspots%2FTooltips)
**In this article, you will learn:**
[How to Add the Tooltip Component](https://help.adventive.com/en/knowledge/tooltip#add)
[How to Configure the Tooltip Component Properties](https://help.adventive.com/en/knowledge/tooltip#configure-properties)
[How to Configure the Tooltip Text Style Options](https://help.adventive.com/en/knowledge/tooltip#text-style)
### **How to Add the Tooltip Component**
Below you will find a step-by-step process to configure the Tooltip component:
1. Once you’ve created your ad, select **Tooltip** from the [Components](https://help.adventive.com/en/knowledge/tools-components)  drop down menu, located on the left side of the builder:
2. A red box will appear in the top left corner of your ad canvas, along with a white text balloon containing "Default Text":
3. Change the size of the red box and move it to cover the area of your ad that you would like the balloon to show upon action by the viewer.
4. Next, type your text within the white balloon box. You can also change the size of the balloon box.
### How to Configure the Tooltip Component Properties
1. To adjust the Tooltip properties and functionality, select the Tooltip component on your canvas:
2. The Tooltip Component Properties panel will appear on the right side of the builder:
**The Tooltip Configuration Options are explained below:**
| **Show On** | |
| --- | --- |
| Hover | The Tooltip balloon will show when a user hovers over the area where the red box is placed. |
| Click | The Tooltip balloon will show when a user clicks on the area where the red box is placed. |
| **Tooltip Position** | Choose where you want the white balloon to display. |
| Right | Displays tooltip balloon to the right of the red box. |
| Left | Displays tooltip balloon to the left of the red box. |
| Top | Displays tooltip balloon above the red box. |
| Bottom | Displays tooltip balloon below the red box. |
| Text Area Background | You can change the color of the text background by clicking on the white box in this field and selecting a color and clicking “OK”: |
| Text Area Border Color | You can change the border color in this field. Follow the same steps as picking background color: |
| Text Area Border Size | Use the arrows in this field to change the border size. |
| Report Label | Click within the field to change the name for reporting purposes. By default, it is labeled as "Tooltip 0". |
### How to Configure the Tooltip Text Style Options
1. To adjust the style of the text, select the Tooltip's text balloon box:
2. The Tooltip Text Properties panel will appear on the right side of the builder:
**The Tooltip Text Styling Options are explained below:**
| Font | Choose the font to display. |
| --- | --- |
| Font Style | Depending on the font you choose, there are certain style options available. *\* For example, the **Roboto** font comes with a variety of styles including Light, Light Italic, Regular, Regular Italic, Bold, Bold Italic, Black, and Black Italic.* |
| Size | Font size. |
| Color | Font color. |
| Line Height | Adjust the height of the text line. |
| Spacing | Adjust the spacing between letters. |
| Style | Choose from bold, italic, or underlined. |
| Alignment | Choose to align your text left, right, center, or justify text (align to left and right). |
| Drop Shadow | Add a drop shadow to your text. |
| Outer Glow | Add an outer glow to your text. |
| Stroke | Add a stroke of color to your text. |
Once finished, [Preview](https://help.adventive.com/en/knowledge/previewing-ads)  and **Save** your ad.
- [Account settings](https://help.adventive.com/en/knowledge/account-settings)
- [Payments and billing](https://help.adventive.com/en/knowledge/payments-and-billing)
- [Advertisers](https://help.adventive.com/en/knowledge/advertisers)
- [Building Ads](https://help.adventive.com/en/knowledge/building-ads#main-content)
- [Builder Basics](https://help.adventive.com/en/knowledge/building-ads#builder-basics)
- [Ad Formats](https://help.adventive.com/en/knowledge/building-ads#ad-formats)
- [Rich Media Components](https://help.adventive.com/en/knowledge/building-ads#rich-media-components)
- [User initiated actions](https://help.adventive.com/en/knowledge/building-ads#user-initiated-actions)
- [Tools](https://help.adventive.com/en/knowledge/building-ads#tools)
- [Embedded Players](https://help.adventive.com/en/knowledge/building-ads#embedded-players)
- [Best Practices](https://help.adventive.com/en/knowledge/building-ads#best-practices)
- [Adventive Services](https://help.adventive.com/en/knowledge/building-ads#adventive-services)
- [Campaigns & Trafficking](https://help.adventive.com/en/knowledge/campaigns-trafficking#main-content)
- [Third Party Tracking](https://help.adventive.com/en/knowledge/campaigns-trafficking#third-party-tracking)
- [Ad Tags](https://help.adventive.com/en/knowledge/campaigns-trafficking#ad-tags)
- [Delivery Groups](https://help.adventive.com/en/knowledge/campaigns-trafficking#delivery-groups)
- [Reporting](https://help.adventive.com/en/knowledge/reporting#main-content)
- [Reports](https://help.adventive.com/en/knowledge/reporting#reports)
[.svg "Logo - Dark (1)")](https://adventive.com)
Copyright © 2026, Adventive Tech Inc
```json
{
"@context" : "https://schema.org",
"@type" : "VideoObject",
"contentUrl" : "https://2658568.fs1.hubspotusercontent-na1.net/hubfs/2658568/Tooltip-Component.mp4",
"dateModified" : "2022-07-15T20:01:13.205Z",
"duration" : "PT10.239S",
"height" : 628,
"name" : "Tooltip-Component",
"thumbnailUrl" : "https://info.adventive.com/hubfs/Tooltip-Component.mp4/medium.jpg",
"uploadDate" : "2022-07-15T20:01:06.229Z",
"width" : 322
}
```