Source

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

By default, the source is set to static

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.

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.

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.

Data

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

Type

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

ACF

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

For ACF Pro, you will need to create an ACF Field and Group (from your dashboard in the Custom Fields tab).

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.

  • Select Group, Field etc.

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.

Data

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

  • Choose required Data in the dropdown.

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.

Theme

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

The Tooltip has a default theme applied.

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

  • Choose required Theme in the dropdown.

  • For example, if we set Theme to Translucent.

  • A translucent effect is applied to the Tooltip.

Animation

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

  • Select required Animation in the dropdown.

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.

Duration

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

Delay

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

  • Set Required delay.

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.

The Arrow will appear in the position set in Placement.

  • Toggle Arrow as required.

Hide on Click

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

The Tooltip will disappear with the same Animation you have set.

  • Toggle Hide and Click as required.

Last updated