How to Use Advanced Tooltip in BricksFly

Want to share extra info without cluttering your page? The Advanced Tooltip feature is your secret weapon! With just a few clicks, you can add sleek little popups that appear when someone hovers or clicks on an element.

Curious how it works? Keep reading to discover all the details!

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

  

How To Activate Advanced Tooltip in BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Extension tab. 
4. Click on General extensions and toggle on Advanced Tooltip.

Step 1: Choose Your Target Element & Enable Tooltip

Select the element where you want to apply the Advanced Tooltip.

Enable ToolTip 

You will find the Advanced Tooltip in the Bricks Builder editor panel.

Go to Content → Advanced Tooltip → Enable → Yes

Once enabled, the Advanced Tooltip option will be active for the selected element.

Step 2: Configure Advanced Tooltip Settings

Content

Under the Content settings, add the tooltip text you want to show when users hover over the selected element.

In this example, the phrase “Marketing is crucial for businesses” is used.

Position

The Position setting controls where the tooltip content appears from when users hover over the selected element.

Available options include Top, Bottom, Left, and Right.

If Top is selected, the tooltip content slides in from above. If Bottom is selected, it slides in from below. Similarly, Left shows the tooltip from the left, and Right shows it from the right.

In this example, Top is selected, so the tooltip content slides in from the top when users hover over the selected element.

Animation

The Animation section lets you choose an animation effect for the selected element.

Available animation types include Fading, Zooming, Bouncing, Sliding, Rotating, Attention Seekers, Light Speed, Specials, etc.

These effects help add motion to the element and make it more noticeable when users interact with it.

In this example, Fade In Right is selected, but you can choose any animation effect based on your design needs.

Animation Duration (ms)

The Duration setting controls the tooltip animation speed. The value is measured in milliseconds.

In this example, 1000ms is used, so the tooltip animation appears slower and smoother.

Arrow

The Arrow setting controls the small pointer that appears with the tooltip box.

In this example, Yes is selected, so the arrow remains visible. Select No if you do not want to display the arrow.

Trigger

The Trigger setting controls the user action required to display the tooltip content.

There are two available options: Click and Hover.

When Click is selected, the tooltip content appears after users click the selected element. When Hover is selected, the tooltip content appears when users move their cursor over the selected element.

In this example, Hover is selected.

Distance

The Distance setting controls the spacing between the tooltip content and the selected element.

In this example, the distance is set to 90. You can adjust this value based on your design layout.

Text Alignment

The Text Alignment setting controls the alignment of the tooltip content.

Available options include Left, Center, and Right.

In this example, Center is selected, so the tooltip content appears centered.

Final Result 

Note: The tooltip size depends on the selected font size. In this example, a large font size is used, so the tooltip content appears larger on hover.