Give the user a better user-experience with dynamic cursors and better pointer-events.
Edit the style of the cursor on user hover. Improve user-experience with this element.
[color=rgb(51, 51, 51)]This are step-by-step instructions on how to get the plugin working on any Bubble App.[/color]
[ml][ol][li indent=0 align=left]Add this plugin to your application.[/li][li indent=0 align=left]Add element 'Cursor' to your Bubble App[/li][li indent=0 align=left]Set element ID[/li][li indent=0 align=left]Set image file (can be static or dynamic)[/li][li indent=0 align=left]Select cursor type[/li][/ol][/ml]
[color=rgb(51, 51, 51)]This plugin will give you a [/color][b][color=rgb(51, 51, 51)]Cursor[/color][/b][color=rgb(51, 51, 51)] as an Element. You need to add the Element to your Editor and set the Element ID, Cursor Image, and Cursor Type for the plugin to work. [/color]
[color=rgb(51, 51, 51)]This element contains the following properties to be used:[/color] [ml][ul][li indent=0 align=left][b]Element ID:[/b] the defined ID of a Bubble element. Leave blank to set the new cursor in the whole document. To be able to add an ID to the element you will first need to expose the option in Settings -> General -> General Appearance[/li][/ul][/ml][quote][color=rgb(136, 136, 136)]Please notice, elements having the same ID is a really bad practice as explained by [/color][color=rgb(136, 136, 136)][url=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id][u]Mozilla[/u][/url][/color][color=rgb(136, 136, 136)]: "The id global attribute defines an identifier (ID) which must be unique in the whole document."[/color][/quote] [ml][ul][li indent=0 align=left][b]Cursor Image: [/b]The image that will be displayed in the cursor. This can be a static or dynamic image file. Cursor will take image dimension's (preferred image size: 25x25)[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]Cursor Type:[/b] Set in which pointer events the cursor will transition into the Cursor Image. [i]Default is auto[/i][/li][/ul][/ml]