> ## Documentation Index
> Fetch the complete documentation index at: https://docs.userpilot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Native Tooltips

> Native Tooltips are interactive in-app messages that appear when users hover over or click on an element.

## Overview

Native Tooltips are interactive in-app messages that appear when users hover over or click on an element. These tooltips provide contextual help without disrupting the user experience, offering on-demand explanations that guide users through your platform.

## Use Cases

* Add quick, on-demand descriptions for core features.
* Provide subtle guidance to improve app navigation.
* Offer assistance when users need it to improve retention.
* Trigger tooltips based on user behavior to boost understanding.

<img src="https://mintcdn.com/userpilot/i_hL61WZW7vm9Xm1/Screenshot2025-07-10at12.33.40.png?fit=max&auto=format&n=i_hL61WZW7vm9Xm1&q=85&s=683905d23f8176b1dca8d24aff8ebfea" alt="" width="732" height="206" data-path="Screenshot2025-07-10at12.33.40.png" />

## Creating Native Tooltips

Creating a Native Tooltip in Userpilot is simple! Just follow these steps:

1. **Open the Userpilot Chrome extension** and go to the page where you want to create the tooltip.
2. Click on **“Start Here”** and select **"Create a Spotlight"**.
3. Choose **"Native Tooltip"** from the options and name your tooltip.
4. Select the theme, and choose whether the tooltip will show from a badge or a specific element.
5. Position the Native Tooltip by selecting the target element you want to trigger the tooltip on.

   <img src="https://mintcdn.com/userpilot/KTNRMPjoIQw4COFA/in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at2.43.12PM.png?fit=max&auto=format&n=KTNRMPjoIQw4COFA&q=85&s=d9018d454fcb43551e752914bfdde445" alt="" width="536" height="622" data-path="in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at2.43.12PM.png" />

### Native Tooltip Settings & Design Panel

The settings and design panel allow you to control how your Native Tooltip behaves, including its placement, trigger actions, and design.

**Settings Options**

* **Element**: Choose or manually detect the element you want the tooltip to appear on.
* **Placement**: Adjust where the tooltip will appear relative to the selected element.
* **Behavior**: Choose whether the tooltip triggers on **hover** or **click**.
* **Show on**: Select if the tooltip appears when interacting with a badge or element.

  <img src="https://mintcdn.com/userpilot/KTNRMPjoIQw4COFA/in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at2.44.25PM.png?fit=max&auto=format&n=KTNRMPjoIQw4COFA&q=85&s=60b865f0afef2ee2f52a20043700efba" alt="" width="558" height="738" data-path="in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at2.44.25PM.png" />

**Embedding Options**

* **Overlay**: The tooltip floats above the page, fixed in place, but can cause layout issues, especially on different screen sizes.
* **Inline**: The tooltip is embedded within the app's layout, providing a smoother, more native feel.

**Frequency**

Choose how often the tooltip should appear

* **Once**: The tooltip appears once and is dismissed after interaction.
* **Every time**: The tooltip will always appear every time a user interacts with the element.

  <img src="https://mintcdn.com/userpilot/KTNRMPjoIQw4COFA/in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at2.44.58PM.png?fit=max&auto=format&n=KTNRMPjoIQw4COFA&q=85&s=e71bd60daf056c512054d8f1ab5a0ecb" alt="" width="536" height="760" data-path="in-app-engagement/spotlights/assets/images/Screenshot2025-03-10at2.44.58PM.png" />

**Design Options**

* **Badge**: Customize the appearance of the tooltip's badge if using one (i.e., an icon or text).
* **Box Settings**: Adjust the width, border, and padding to fit your desired look.

<img src="https://mintcdn.com/userpilot/eKuoNPh2qVInx2ej/images/Screenshot2025-07-10at12.32.38.png?fit=max&auto=format&n=eKuoNPh2qVInx2ej&q=85&s=977f93bb830dd7f8df517711a7d9209f" alt="Screenshot2025 07 10at12 32 38 Pn" width="678" height="1892" data-path="images/Screenshot2025-07-10at12.32.38.png" />

### FAQs

<AccordionGroup>
  <Accordion title="What if I need the tooltip to appear for only certain users?" defaultOpen="false" />

  <Accordion title="What if the tooltip’s message is too long for a small button or icon?" defaultOpen="false">
    If the message is too long, try breaking it up into multiple tooltips to give more room for text. Also when adding a long text to the tooltips **a scroll bar** will appear.
  </Accordion>
</AccordionGroup>

<Frame>
  [**For any questions or concerns please reach out to support@userpilot.com**](mailto:support@userpilot.com)
</Frame>
