Link to the plugin page: https://zeroqode.com/plugin/1617981518362x877549542582502700
Demo to preview the plugin:
Introduction
Are you looking to elevate the UI/UX of your Bubble app to the next level? The Air Tooltip plugin by Zeroqode is a powerful no-code solution designed to enhance your app’s user interface and user experience effortlessly.
With its rich and versatile tooltip feature, you can create engaging, dynamic interactions that captivate users and improve navigation within your app.
Whether you're designing for clarity, accessibility, or simply adding a touch of sophistication, the Air Tooltip plugin is the perfect tool to achieve your goals.
NB: To use your own style make sure you have checked the box, “Custom style”.
NB: Currently this works for the following elements: buttons, texts, inputs, multiline inputs.
You can use this in a repeating group. Use the index of the field with some text to create some expression for the Element ID attribute and use the same expression for your tooltip.
👛 Please support our efforts to keep this plugin free—your donations help us invest the time and resources needed to continue maintaining and improving it for everyone’s benefit: https://zeroqo.de/support.
How to setup
- Enable ID Attributes
Go to the settings page in your editor. Under the General tab click on the checkbox “Expose the option to add an ID attribute to HTML elements”
- Assign ID to Trigger Elements
To attach a tooltip to an element (text,input,multiline input, button), enter a unique value in the ID Attribute field of the element.
- Add the Air Tooltip Element
- Drag the Air Tooltip element onto your page. It won't be visible during preview.
- Configure the following essential settings in the Air Tooltip element:
- Trigger Element’s ID: Enter the ID of the element that will trigger the tooltip.
- Target Element’s ID: Specify the ID of the target element. If left blank, the trigger element will be used.
- Content: Define the text or dynamic data to display in the tooltip.
- Theme: Choose the tooltip style (e.g., dark, light).
- Additional Fields: Fill in other fields as necessary, such as corner positions, shadow, and animations.
Example:
descriptionCurrent cell's index.Example:
descriptionCurrent cell's index.Example:
Parent group’s User’s Description.Plugin Element Properties
Fields:
Title | Description | Type |
Trigger element’s ID | Id attribute of the trigger element. If you want to use a tooltip in a repeating group you need to generate unique id’s for the elements. The easiest option is to use some text + current cell index | Text |
Target element’s ID | Id attribute of the target element. If nothing is specified the trigger element will be used. | Text (optional) |
Title | Title of tooltip. | Text (optional) |
Content | Content to display | Text |
Tool tip corner | Tool tip corner Available options: top left, top center, top right, right top, right center, right bottom, bottom right, bottom center, bottom left, left bottom, left center, left top | Dropdown |
Target element corner | Target element corner Available options: top left, top center, top right, right top, right center, right bottom, bottom right, bottom center, bottom left, left bottom, left center, left top | Dropdown |
Theme | Select a theme from this list or you can define your own style below Available options: cream, light, dark, red, green, blue, bootstrap, tipsy, youtube, jtools, cluetip, tipped | Dropdown |
Shadow | Apply a shadow to the tooltip | Checkbox (yes/no) |
Rounded corner | Rounded corner for the tooltip | Checkbox (yes/no) |
Show event | Type of event to trigger tooltip Available options: click, mouseenter | Dropdown |
Show effect | Tooltip show effect Available options: no effect, fadeIn, slide, slideDown | Dropdown |
Delay (in seconds) | The delay before the tooltip shows. Specified in sseconds | Number (optional) |
Hide effect | Tooltip hide effect Available options: fadeOut, slide, slideUp, no effect | Dropdown |
Hide event | The type of event that triggers hiding the tooltip Available options: mouseleave, click, close | Dropdown |
Show small tip | Show small tip of the tooltip | Checkbox (yes/no) |
Use mouse as target | Check to use the mouse as target | Checkbox (yes/no) |
Move with mouse | Move tooltip with mouse | Checkbox (yes/no) |
Hide all other tooltips | Check this option to hide all other active tooltips when a new tooltip is shown. | Checkbox (yes/no) |
Text direction | Available options: left to right, right to left | Dropdown |
Use Custom Style | Create and use your own style | Checkbox (yes/no) |
Background Color | The background color for the tooltip. | Color (optional) |
Border Color | The border color for the tooltip. | Color (optional) |
Font Family | Examples: “Georgia, serif”, “sans-serif”, “cursive” | Text |
Font size | Font size (px) | Text (optional) |
Font Color | The color of the text in the tooltip. | Color (optional) |
Bold font | Make the font bold for the tooltip text. | Checkbox (yes/no) |
Italic font | Apply italics to the tooltip text. | Checkbox (yes/no) |
Text decoration | Available options: underline, strikethrough | Dropdown (optional) |
Title Background Color | Background color for the tooltip title. | Color (optional) |
Title Font Color | Font color for the tooltip title. | Color (optional) |
Max width | Max width for tip in px. | Number |
Min width | Min width for tip in px. | Number |
