# Source

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

{% hint style="info" %}
By default, the source is set to static
{% endhint %}

## Static

A static Tooltip source will rely on content provided by the user. It will not update automatically, and relies on manual changes.

* Select a block
* Open the Advanced tab
* Open the Tooltip Tab
* Set Source to Static.

![](https://lh4.googleusercontent.com/4meo1BKdxyUj4OO4agFnzO_I0XLat8Zcdp9pSjzVRKGhPdL-12U8qQmYWNmoT_uANecrF1bIkDdA_SlpnDl2IrC6TrENkHdMy53AwUAISHj-982s_6p5_n9Muy7jpCClI0aZfnTuf5CbFYOCYMMeF6M)

### Content

The Content property allows you to input the Tooltip label.

* Open the Advanced tab.
* Open the Tooltip tab.
* Set Source to Static.
* Input required Tooltip label.

![](https://lh4.googleusercontent.com/oLibqZ3JX0UlibIAPT1yEZu2T-jI3_r10_XJkjA8Hl1F7Gjj2k7o7f11an4TZA817v84M1ohBQ4YJ9WlILft_N25mMZ_kPjyS7r2H6V_4A4G_-xnmJh7qQgO0CRg531Wqgslet6jQt5qzRd1AXvNorc)![](https://lh5.googleusercontent.com/XyCDPunKVNfbrutu-8vsVFl1I2EO2LBbQQ9wc1EHxaxCnHFpJsFjgtqB5LYmUwkqQS9eEYavM_mt2FQFFciOOeqSazqm3DrV06zNNDGl0FARkXgoF9009P5dZyYfc58ZD0rAs3CiAgrom1kl1SAHXtU)

## WordPress

The WordPress Source allows you to  choose dynamic WordPress content for your Tooltip.

* Select a block.
* Open the Advanced tab.
* Open the Tooltip tab.
* Set Source to WordPress.

![](https://lh4.googleusercontent.com/MLwoBPSSyox0IMjOIhJZ1_tCuRJZLrAUPAmYOYvibFpV8YpCk0QbRdzFv1-suXoW-oiFhOBO2MiQ2lN96qaZOXL2W0zIMGVTKmFL9foynReQKzy0OiNOuURZgNSokHFOffDkUEGhqWvL3a-KnAe9zMQ)

### Data

* Select required Data in dropdown, such as Post Date, Post Excerpt, Post ID, Post Tag etc.

![](https://lh6.googleusercontent.com/wyxVST3ZBrmR7X7A404q662qaZHSpEMU5G-2ut_FnbEwmTYTGV4du53aQEyRLjJOEEYpR9QA-heDoHlcSfcUrHSN6-oFwYFr2Ws0PlwYhNiUfUXAOic0yXJ98L9GYe6_MgkHQ01x5pp2kL0D6CNv2mk)

### Type

* Set required WordPress Type depending on the type of WordPress data.

![](https://lh4.googleusercontent.com/cYwR8JjsN9Iw2V6-_Fe1WlOvQJDVZ_gB9e_su8BpC7h9vAnZZ5ZHTG5UofgLTvr4ibKlQGSIezjgBo-UNq7bZuyrK7OfWiUea94q65Axtz8IsmkajMsrLZqzVRFYrh4v7yee02t-PBUsiCgwIWjMaio)

## ACF

The ACF Source allows you to  choose dynamic ACF content for your Tooltip.

{% hint style="warning" %}
For ACF Pro, you will need to create an ACF Field and Group (from your dashboard in the Custom Fields tab).
{% endhint %}

It will update automatically as it relies on WordPress dynamic features as well as ACF Pro.

* Select a block.
* Open the Advanced tab.
* Open the Tooltip tab.
* Set Source to ACF.

![](https://lh6.googleusercontent.com/gigGyqiZgsjisZO33ArWDSPPHEba4VKJDv8crIuWxINe7Fsh7oSot7NLWa6OUmMW0VlzZnOzM806UegcZCss7C_tOB7IaNLZ7U0aWL57gKqfGyWpvxSLTZ8FEHG4zlxlaLjj3wiW2YMSnfYq9qdSosY)

* Select Group, Field etc.

![](https://lh6.googleusercontent.com/Eh_RpcTtv-wOndy7_IghH_crPAneQExQkG8bkmUvZmFVudglkY-6G0k3N3KV0N0f6KfK9iWlRKq5DLs_5UR6J1j-G3ps23tQ-ObhuIvv9zgiLQjsFZmM6WZJt1Mw_4P8z20omsatjlTL9sRByX9fZSQ)

## WooCommerce

The ACF Source allows you to  choose dynamic WooCommerce content for your Tooltip.

* Open the Advanced tab.
* Open the Tooltip tab.
* Set Source to WooCommerce.

![](https://lh4.googleusercontent.com/TryTlX5KxCsi0_ks2GgVeR1CoszibAEreSXaTCl7RNBfhgf4m_lSI1snxw50fn-mMY8VNTdQo3Uhqv0TReHmWGTxIeYyatfHsQzMv85Wsr16oNSlnnEqUzuyTeg2ZzLjKB_05h_0DfxwbwqMk1Ny5qs)

### Data

The Data property allows you to choose the required data for your WooCommerce Tooltip.

* Choose required Data in the dropdown.

![](https://lh4.googleusercontent.com/g6MpUmptsNFkN4PeyqLhFFEM1YUz2kH1TofJkGXbD_QmsrhL6F6yaoEvrzKMdIDKB2L7s_e9hND1ErgUxpKWJdzGBE9s5Gc7piNJKSWz-A1EP6vtdAmesW1helSLwwmFZNUGhZlCrRYJP0WviMDBjNE)

## Placement

The placement property allows you to select where you want the Tooltip to appear in relation to your Mouse. These include variations on top, right, left and bottom.

![](https://lh5.googleusercontent.com/CXbM6p_9DvyqsA1X_3171D1Hw3XgFkBpgwdQPs5Fp4-xXBklsY4K_fxaLRQ_LzJzbNRauc3ekxowVhwRoP7gMpLo-5fY3MBpY6IDgtPPhPllHXKBfiIzqdfLbJIarwETOivLrBliXQedTI3Lwcmcgow)

## Theme

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

{% hint style="info" %}
The Tooltip has a default theme applied.
{% endhint %}

You can choose from several preset Tooltip Themes (light, translucent, material...)

* Choose required Theme in the dropdown.

![](https://lh4.googleusercontent.com/bmn3VsyK8Nie1GuSOeGbVyDzIruhChw4XrUPFLlwo93GUXIrrE5aCnsLUQPGr_zPTWh1Lezruocc85JfcnY-TlIFXhi_awDCqyzTWcjwkFYcyLS-5skbJSOMbzBtFi8PWgmdCTvd7U8GRWU44vBlsOg)

* For example, if we set Theme to Translucent.

<figure><img src="https://lh6.googleusercontent.com/WOt030h-fxXAktLLuDqscOr_flaa22SQFqC9Y_ZNKb7L-LBtJYcFA6cQHESVx0k4tUfEeQAwGOSGWCeMgS1qZdOX7bZUFOjtRGzpcH0650IOM0pu_iiPEzrRZfEBYxAb57Jn0xvUvACkIcCfxWtFsS4" alt=""><figcaption></figcaption></figure>

* A translucent effect is applied to the Tooltip.

<figure><img src="https://lh4.googleusercontent.com/sS7tzfT-rz1DbUqgdfgN4tDxNy51tbCw4TYSnOF1TfUVvPPyZwVfSA1uNgU5q96S8ducFtSsRIiQ_Ie2AuUezuFTk0e-uihfD_HleKW6RdgZr8r-bQGBzVciBTLB9CV-bkgxxq3ak6UAHSXgNkm0VVI" alt=""><figcaption></figcaption></figure>

## Animation

The Animation property allows you to add an Animation to your Tooltip.

* Select required Animation in the dropdown.

![](https://lh6.googleusercontent.com/Hr0RTH_8790vghJc0RX4bGMz4lZeNc8C4-f6_Up8PR4GSD68iRrRcc1nz1yt-3I3S_vhj0xpkogZt5zK2-MquCk8kS5D7bk361cNto_AkitNgA19CrhkZgwi-0PAUi-LpE-LHQAG5nT_mo0ob4_x9EI)

## Follow

The Follow property allows you to choose whether and how the Tooltip should follow the mouse or pointer.

* Set Follow to required option in dropdown.

![](https://lh5.googleusercontent.com/uu4d0QZls8hEKAO9_7DUpKaxDwy7UWCkbYDv8lt4VM4dWD0vR_pgJOlW5yWIIzHUrPXzeNfKyjIi1dXSu-E1Ir_fR_8B9UJvf9oHkMMtYHrkgGfa5hZJWMZ66RMfovZBdFgBmWbfy51_NHAKrgrqlVQ)

## Duration

The Duration property allows you to set how long you wish the animation to last.

![](https://lh4.googleusercontent.com/5HBuzFUU54bY7MAJqONXaLbDi4vS9_U3q8Xutq1jXowEhjiuDcFeS-qvckF-WG-xCjNnM13sgfmKwMVVXPBpPMCQqq5cTO1fbsElBXWXBKeCF77p6r6tku1VlcQN4zvAvz1DBFs4hhpVPXhuMXa3fGU)

## Delay

The Delay property allows you to. set a delay before the Tooltip appears.

* Set Required delay.

![](https://lh6.googleusercontent.com/9_sNxEXJBUeu7GK46-8H6X7TVb4cazr1Jb6wM_QesGK_GYnGm_Ha6r4tpNA-qtyerWZhaKemqJxdUCNTR32Q1SCoL4eYXUUsbm9odlT-xBjjsK3xGrxhzNtSEWDQHAaWwVVfheXFMfKtSSU3doii5WQ)

## Arrow

The Arrow property, really more like the tail on a speech balloon, allows you to add a pointer to the Tailtip to allow you to better see which element it is referring to.

{% hint style="info" %}
The Arrow will appear in the position set in Placement.
{% endhint %}

* Toggle Arrow as required.

![](https://lh5.googleusercontent.com/DNJxKvyYGpmsX6cBWX-Xa_C-kA3KMAS2SIWFYvlRW7WRkzEkrP8sRVgXOXTlrkbo41N_qBbQ74AMGpX88Fa3zkWduwPRYhzQLaHjWLQpCUg4-G_HCiW8DmWIGHe99_aDv-bP_1fUB59em5LBVmkMTbM)![](https://lh5.googleusercontent.com/P9AEIhT_QMViwSJ9d7B2OLM5GJOjNtRW2etIHpz4Szz-wFn7mT0kQ3SOwBjI9xA38VYlJix9ymaVr6R47YWqnXENU2Hht7_Y4FOCqGd3kOhZkIkxSRMNgpvIJAd0-oOvLZpYSim_5_qs4zRkJiAd5ro)

## Hide on Click

The Hide on Click property allows you to hide the Tooltip when you click.

{% hint style="info" %}
The Tooltip will disappear with the same Animation you have set.
{% endhint %}

* Toggle Hide and Click as required.

![](https://lh4.googleusercontent.com/-aDXOjyXfiPLg6vVCgBCKBjTftIpxMCIfW_rcFDirKMwOsCUsuRQ456HYJL-b-GBxla0543tlU0D2CQMipbhfllOyVWvEBQFhattZ7WVDGFu42yUFCx_0KOzLLcR8Z_krCq7CDHgcQE2-rNpD9zhn90)