General Extensions Advanced Tooltip Extensions Estimated reading: 6 minutes 36 views 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 Elementor (Page Builder) Animations Addons for Elementor (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Advanced Tooltip Go to your WordPress Dashboard. Click on Animation Addons. Head to the Extension tab. Click on General extensions and toggle on Advanced Tooltip. Step 1: Choose Your Target Element Select the element you want to apply the Advanced Tooltip to, then click on the ‘Advanced tab.’ Next, click on ‘Advanced Tooltip’ and toggle the ‘Enable’ switch to ‘On’. The Advanced Tooltip is now enabled. You’ll find the option available in the page builder. Enable ToolTip The first thing you’ll see is the ‘Enable’ option. To preview your animation inside the editor, you need to turn this on using the “Enable On Editor” setting. If you switch it to “On”, the animation will play right in the editor, just like it would on your actual website. But if you leave it “Off”, the element won’t animate in the editor—it’ll just stay still. Don’t worry, though, the animation will still work perfectly on your live site. In short, this setting lets you see how your animation looks while you’re working on your page. There are two options available, ‘Settings’ and ‘Styles’. I will start with ‘Settings’ in this example, but you can choose whichever works best for you. Step 2: Adjust Tooltip Style and Behavior Settings Change the look and behavior of your tooltip to fit your design. You can adjust its position, animation, timing, text alignment, and more to create a better user experience. Settings Content: In the content settings, you can enter any text you want to display when someone hovers over a specific element. For example, I wrote the phrase ‘Marketing is crucial for businesses’. Position: The Position settings include four options: Top, Bottom, Left, and Right. If you select ‘Top,’ the extra info will slide in from above when someone hovers over the element. In the same way, choosing ‘Bottom‘ brings it in from below, ‘Left’ slides it in from the left, and ‘Right’ makes it appear from the right. In my case, I selected ‘Top,‘ so the extra info slides in from the top when users hover over the targeted elements.” Animation: The Animation section offers a range of effects that help bring your element to life. You can choose from options like Fading, Zooming, Bouncing, Sliding, Rotating, Attention Seekers, Light Speed, and Specials. These effects let you add hover animations to your element to draw the user’s attention. For example, I selected the ‘Fade In Right’ animation, but you can choose any animation effect you prefer. Animation Duration (ms): It controls how long the tooltip animation takes to complete, measured in milliseconds (ms). For example, I’ve set it to 1000, which makes the animation slower and more gradual, but you can choose any value that suits your preference. Arrow: Arrow settings control the small pointer or triangle that appears on the tooltip box. I usually keep it enabled, but you can turn it off if you prefer not to show it. Trigger: The trigger settings offer two options: Click and Hover. If you choose Click, the extra info will appear only when a user clicks on the target element. On the other hand, if you select Hover, the extra info will be displayed as soon as the user moves their mouse over the element—no click needed. Distance: In the Distance settings, you can choose any value to control how far the Extra Info appears from the element. For example, I set it to 20, but you can adjust it to whatever works best for your design. Text Alignment: The Text Alignment settings let you choose whether the extra info appears on the left, right, or center. I went with Center, but you can select whichever option fits your style and layout best. Step 3: Style & Appearance Customization Adjust the look of your tooltip to match your design. From width and font to colors, padding, and shadows, these settings let you style every part of the tooltip just the way you want. Styles Width: This width setting controls how wide the tooltip box will be when users hover over a specific element. You can set the width to any value you prefer. I’ve set it to 120, but you’re free to choose what works best for your design. Tooltip Arrow Size (px): This setting controls the size of the small arrow that appears on the tooltip, usually pointing to the element it’s linked to. I set it 5 but you can set value as per your choice. Typography: The Typography settings let you adjust the look of your text. I picked the ‘Nunito’ font, set the size to 14, and chose a weight of 500 (medium). I kept the other settings as they were. You can explore all the options and set them however you like. Background Color: The Background Color setting lets you easily change the tooltip’s background. I chose black, so the info text will appear with a black background when users hover over the specific element. Text Color: The Text Color setting lets you change the color of the text inside the tooltip. I chose white, but you can pick any color that fits your design. Border Radius: The Border Radius setting lets you control how rounded the corners of the tooltip box are. I kept it the default, but you can set different values for the top, right, bottom, and left corners based on your preference. Padding: The Padding setting controls the space between the text and the edges inside the tooltip box. In these settings, I didn’t change anything, but you can customize it based on your choice. Box Shadow: In the Box Shadow settings, you’ll see options like Color, Horizontal, Vertical, Blur, Spread, and Position. I set each of them to 10, but you can adjust the values to suit your needs. Final Result You Did It Awesome, you have successfully added and customized your advanced tooltip. Your tooltips now display extra info smoothly and look great on your site. With your styling and settings, you have made the site more engaging and user-friendly. Lastly, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
