Demo to preview the settings
Introduction
Easily enhance your Bubble app with the Modern & Stable Tooltips plugin, designed to deliver sleek, responsive tooltips that elevate the user experience. This plugin provides a reliable, production-ready solution, filling gaps left by other tooltip options. Built from the ground up, it ensures maximum stability and performance, offering smooth and seamless tooltips that align with your app's modern aesthetic.
With Modern & Stable Tooltips, you can customize the look and behavior of tooltips to fit various use cases, from providing helpful hints to displaying additional information, enriching user interactions without disrupting app flow. This plugin is ideal for apps prioritizing high-quality UI elements and consistent, stable interactions across devices.
How to setup
- Install Modern & Stable Tooltips (Tooltip) plugin
- Place the Modern Tooltips element on the page
Plugin Element Properties
Title | Description | Type |
Data Source | Source of data | App type |
Element ID | ⚠️ Element IDs can't start with a number! The is the element ID of the element you want to use to display the tooltip | Text, Required |
Tooltip content | The content to display on the tooltip | Text or Image, Required |
Element IDs (comma separated) | Supply a comma separated list like: id-1,id-2,id-3 etc. | Text, Optional |
Tooltip content (comma separated) | Supply a comma separated list like: Content 1,Content 2,Content 3 etc. Make sure your texts do not contain commas | Text, Optional |
-------Animation Options ------ | ||
Animation | Animation type | Dropdown |
Appear duration (ms) | Duration of appearing | Number, Required |
Disappear duration (ms) | Duration of disappearing | Number, Required |
--------- Delay Options -------- | ||
Show delay (ms) | Time of displaying the animation | Number, Required |
Hide delay (ms) | Time of hiding the animation | Number, Required |
---------Styling Options ------- | ||
Background color | Background color | Color |
Border radius | Border radius | Number, Required |
Border width | Border width | Number, Required |
Border color | Border color | Number, Required |
Padding top | Padding in px | Number, Required |
Padding right | Padding in px | Number, Required |
Padding left | Padding in px | Number, Required |
Padding bottom | Padding in px | Number, Required |
--------- Other Options -------- | ||
Placement | Placement of tooltip | Dropdown |
Distance from target | Distance from the target element in pixels | Number, Required |
Hide on click | Allows to hide the tooltip on click | Checkbox |
Interactive | Allows you to hover over and select text inside it. | Checkbox |
Max width | Max width | Number, Required |
Z-index | Z-index | Number, Required |
