1. Home
  2. Docs
  3. Content Elements
  4. Tooltip

Tooltip EA Element

The Tooltip Element offers you the ability to create a “tooltip” linked to specific text. Tooltips usually display informative text when users tap on an element. You can add tooltips to the icon, text, image or even within a shortcode. Here in this tutorial, you’re going to learn how to use the Tooltip element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Tooltip Element

 

 

»Content

 

Content Settings

⇒Content-Type: Set the content type from here. You can select content type as image and upload an image or just simply select text to add tooltips for some heading type content. You can also use icons and shortcodes.

⇒Add Content: Now add any content based on your content type. Enter text if you select your content type as text or upload an image or icon.

⇒Content Alignment: Set the content alignment.

⇒Enable Link: Enable/disable link within the content.

⇒Button Link: This is where you can add your Desire link or URL so that your content can get alive by linking to other pages. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link

 

Tooltip Settings

⇒Content: Enter the tooltip content here. Click on Dynamic settings to apply the AnalogWP Classes to the content. (Ex. Add a dark background)

⇒Hover Direction: Set the hover direction for the tooltip.

⇒Hover Speed: Set the hover speed.

 


»Style

 

Content Style

⇒Content Max Width: Set the content max-width.

⇒Padding: Set the padding value for the top, right, bottom and left around the content for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the content for different dimensions. You can link the values together or customize them individually.

⇒Background Color: Add a custom background color to the content for both normal and hover view.

⇒Text Color: Add a custom color to the content text for both normal and hover view.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the content for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Typography: Set the typography options for the content.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the content for different dimensions.

 

Tooltip Style

⇒Tooltip Width: Set the tooltip width for different dimensions.

⇒Tooltip Max Width: Set the tooltip max-width for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the tooltip for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the tooltip for different dimensions. You can link the values together or customize them individually.

⇒Background Color: Add a custom background color to the tooltip.

⇒Text Color: Add a custom color to the tooltip text.

⇒Typography: Set the typography options for the tooltip text.

⇒Arrow Size: Customize the arrow size of the tooltip box for different dimensions.

⇒Arrow Color: Add a different custom color to the arrow.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Tooltip Element.


Was this article helpful to you? Yes No

How can we help?