V4 Extentions Cursor-Hover-Effect Estimated reading: 4 minutes 3 views Show a small bubble with your own text that follows the mouse when visitors hover over an element. A great way to say “View”, “Play” or “Drag” in a simple, modern way. No code needed. WORKS ON Any V4 element EFFECT Follows the mouse PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS Pro Tip: Install and activate both Animation Addons plugins before you start. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab. Under Interaction Extensions, turn on Cursor Hover Effect. Click Save Settings. Cursor Hover Effect Extension 1 (click to zoom) STEP 2 Add the Effect Now add the effect to any element in the Elementor editor. Open your page with the Elementor Editor. Select any V4 element, for example a Heading or an Image. In the General tab, open the Cursor Hover Effect section. Turn on Enable. Write your message in Text. Cursor Hover Effect Extension 2 (click to zoom) That is all. When a visitor moves the mouse over this element, a bubble with your text appears and follows the mouse. When the mouse leaves, the bubble goes away. Note: The effect is made for mouse hover. It needs a mouse, so it will not follow a finger on touch screens. SETTINGS Content Settings These settings control when the bubble shows and what it says. Cursor Hover Effect Extension 3 (click to zoom) Enable Default: OffTurn the effect on or off for this element. You can set it per screen size. Text The message inside the bubble. Keep it short. Example: View Project Tip: If you leave Text empty, the bubble shows the words Cursor Hover Effect. Always write your own text. Enable on Editor Default: OffTurn this on to see the effect inside the Elementor editor. SETTINGS Style Settings These settings control how the bubble looks. Cursor Hover Effect Extension 4 (click to zoom) Font Size Default: 16pxThe size of the text in the bubble. Text Color and Background Default: #ffffff on #000000Text Color is the color of the words. Background is the color of the bubble. Width and Height Default: 120pxThe size of the bubble. For a round bubble, use the same number for both. Example: 100px and 100px. Padding Space inside the bubble, around the text. Use it when your text is long. Border Add a border and set its color, width and radius. Note: To round the corners, first choose a Border Type such as Solid. Then set the Radius. PER DEVICE Turn It Off On Small Screens Enable can change per screen size. Use the Desktop, Tablet and Mobile buttons at the top of the editor. Keep it on for desktop. Turn it off for tablet and mobile. TRY THIS Quick Recipe Not sure where to start? Use this for a clean round bubble. TEXT View WIDTH 100px HEIGHT 100px FONT SIZE 16px BACKGROUND #1f2937 TEXT COLOR #ffffff BORDER TYPE Solid RADIUS 50 NEED HELP? Troubleshooting I do not see the Cursor Hover Effect section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) and turn on Cursor Hover Effect. Then reload the editor. Nothing follows my mouse on the live page Make sure Enable is on, the page is saved, and Animation Addons Pro is active. Move the mouse over the element itself. The bubble shows only while the mouse is over that element. Clear your site cache if you use a cache plugin. My bubble says “Cursor Hover Effect” The Text field is empty. Type your own message in it. You Did It Your element now shows a bubble that follows the mouse. If you face any problem, please contact our support team. We are happy to help.
