Custom Mouse Pointer

The Custom Mouse Pointer Plugin allows you to easily customize the mouse pointer in your Bubble app, enabling you to enhance user experience with predefined or custom-designed cursors. Whether you want to indicate clickable elements, enhance the design with interactive effects, or create a unique look for your app, this plugin gives you full control over the mouse pointer's appearance.FeaturesPredefined Pointer Styles: Choose from a wide range of predefined cursor types, including:Default, Pointer, Crosshair, Move, Text, Wait, Help, Progress, Zoom-In, Zoom-Out, and many more.Custom Image Pointer:Upload your own image to use as a custom mouse pointer.Supports .png and .svg formats.Image size must be a maximum of 32x32 pixels for optimal performance.Apply to Specific Elements:Easily target specific groups or elements in your app by entering the element's ID Attribute.Dynamic Interaction:Change mouse pointers dynamically based on user actions, such as hovering, clicking, or loading.

Demo Link: https://chakor-plugin-demo-6.bubbleapps.io/version-test/custom-mouse-pointer

Editor

Link: https://bubble.io/page?id=chakor-plugin-demo-6&tab=Workflow&name=custom-mouse-pointer&type=page

Instructions to use:

1. Install the Plugin in Your Bubble App
   
   • Open your Bubble app editor.
     
   • Navigate to the Plugins tab.
     
   • Click on Add Plugins and search for "Custom Mouse Pointer."
     
   • Install the plugin into your app.
     
2. Add the Plugin Action
   • Go to the Workflow tab in your Bubble app editor.
     
   • Choose a trigger event (e.g., page load, element hover, button click).
     
   • Add the action "Set Mouse Pointer" from the plugin's actions menu.
     
3. Configure the Mouse Pointer Properties
   • In the "custom-mouse-pointer" action, configure the following properties:
     
   • Pointer Type: Select the desired pointer type from the dropdown menu. Supported predefined pointers include:
     • default
       
     • pointer
       
     • crosshair
       
     • move
       
     • text
       
     • wait
       
     • help
       
     • progress
       
     • alias
       
     • cell
       
     • copy
       
     • grab
       
     • grabbing
       
     • not-allowed
       
     • zoom-in
       
     • zoom-out
       
     • context-menu
       
     • no-drop
       
     • vertical-text
       
     • col-resize
       
     • row-resize
       
     • all-scroll
       
     • e-resize
       
     • n-resize
       
     • ne-resize
       
     • nw-resize
       
     • s-resize
       
     • se-resize
       
     • sw-resize
       
     • w-resize
       
   • Custom Pointer: If you select "custom" as the pointer type, upload an image to use as the custom pointer.
     
   • Image Size: Ensure the custom image is in PNG or SVG format and has a maximum size of 32x32 pixels for optimal performance.
     
   • Group ID: Enter the ID Attribute of the group where you want to apply the custom pointer.