# Tooltip

<figure><img src="https://lh5.googleusercontent.com/O2r5Lh0rufcLqdV8Ek7ZTLAPBjo-j-Spt-zekJcRbAwiIXSm81diW0N70uH-lf-GBG_2CV21-tfQVP94IJDdznIlkhLjE5bIhZQpz0CyodMWcVGzD8tNfWoMoA_yHjq-FEWATmi9t8owSXuVHry9Cvk" alt=""><figcaption></figcaption></figure>

The Tooltip property allows you to showcase additional information  when the user moves the mouse pointer over an element.

## Add

* Open the Advanced tab.
* Open the Tooltip tab.
* Set up as required.

![](https://lh6.googleusercontent.com/aYaPoNsF4fIVKiRl-dCiQAfkVaJulJWjfjg1F0st08pHrhQZu11oC8bfYGtWcieS2TcJxe8I_EPAPix9Cunk66zbnimxS7-K3F-Vxxa4C-pra0tdhPKnxNlGFlBjIXt52d41Tzq2PrYqd1gcFlLrxFc)

{% hint style="info" %}
Make sure the Tooltip is active before setting anything.&#x20;
{% endhint %}

## Active

* Select a block.
* Open the Advanced tab.
* Open the Tooltip tab.
* Toggle on.

![](https://lh3.googleusercontent.com/QqGegqw9g7WPiis0vjO8TReHAoMA5QqjXml_4dg3QgUbmLVcyY1Dj2aJAFjYqlPWJG33f5Wa8xFhPRJqiPFI0QDaLPVOae9vswaE0YfbHFJnVpsGTXr1qrvAxadzR11ssgsi_iVhsBKGzZNjR5HAHn4)

## Source

The Source property allows you choose whether the Tooltip content source will be static or dynamic.

{% content-ref url="/pages/40V2bWQ5GrYlqBr9PACq" %}
[Source](/advanced/tooltip/source.md)
{% endcontent-ref %}

## Placement

Allows you to choose where the Tooltip is placed (top, bottom, left...)

<details>

<summary>Add</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Advanced tab
4. Select the Tooltip tab
5. Find the Placement property
6. Click on the desired type options (fade, scale, puff, flicker)​​

</details>

## Theme

Allows you to choose your Tooltip's theme, which means the way it looks.

{% content-ref url="/pages/4xTN5LuYHOiRe5MHxhrA" %}
[Broken mention](broken://pages/4xTN5LuYHOiRe5MHxhrA)
{% endcontent-ref %}

## Animation

Allows you to set the entrance/exit of the Tooltip. (Fade, scale, shift away...)

## Follow

Allows you to choose whether or not your Tooltip follows the user's mouse.

## Duration

Allows you to set a Transition Duration, helping to make its entrance/exit more or less smooth.

<details>

<summary>Add</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Advanced tab
4. Select the Tooltip tab
5. Find the Duration property
6. Enter the desired duration

</details>

## Delay

Allows you to set a Delay for your Tooltip's entrance/exit.

<details>

<summary>Add</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Advanced tab
4. Select the Tooltip tab
5. Find the Delay property
6. Enter the desired delay

</details>

## Arrow

Allows you to set an arrow.

<details>

<summary>Activate/Deactivate</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Advanced tab
4. Select the Tooltip tab
5. Find the Arrow property
6. Toggle the button on/off

</details>

## Hide On Click

Allows you to hide the Tooltip, once the user has clicked.

<details>

<summary>Activate/Deactivate</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Advanced tab
4. Select the Tooltip tab
5. Find the Hide On Click property
6. Toggle the button on/off

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/advanced/tooltip.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.