All Plugins
Advanced Tooltips for any Element
Free
Create beautiful and highly customizable tooltips for any element in your application.
About
[h2][b]Customizable Tooltips[/b][/h2] Elevate your application's user experience with our highly customizable tooltips plugin. Designed for ease of use and maximum flexibility, this plugin allows you to create stunning tooltips for any element in your application. [h4][/h4] [h4][b]Key Features[/b][/h4] [ml][ul][li indent=0 align=left][b]Easy Customization[/b]: Effortlessly tailor your tooltips to match your application's style and branding.[/li][li indent=0 align=left][b]Text Customization[/b]: Personalize the content of your tooltips with ease.[/li][li indent=0 align=left][b]Positioning Options[/b]: Place your tooltips exactly where you need them—above, below, left, or right of your elements.[/li][li indent=0 align=left][b]Adjustable Length[/b]: Control the length of your tooltips to ensure they fit perfectly within your design.[/li][li indent=0 align=left][b]Background Color[/b]: Choose from a wide range of background colors to make your tooltips stand out or blend seamlessly with your interface.[/li][li indent=0 align=left][b]Text Color[/b]: Ensure readability and visual appeal by customizing the text color.[/li][li indent=0 align=left][b]Border Radius[/b]: Add a touch of elegance with adjustable border radii, from sharp corners to smooth, rounded edges.[/li][li indent=0 align=left][b]Text Size[/b]: Adapt the size of the tooltip text to ensure clarity and emphasis.[/li][/ul][/ml] With our plugin, you can transform simple tooltips into dynamic, visually appealing elements that enhance user interaction and provide valuable information seamlessly. Whether you're looking to highlight key features, offer additional context, or guide users through your application, our customizable tooltips are the perfect solution. Start creating beautiful, functional tooltips today and make your application more intuitive and user-friendly with our Customizable Tooltips Plugin. [b][size=4]🧑🏻💻[/size][/b][b] Demo:[/b] [color=rgb(0, 102, 204)][url=https://plugins.datamaticsoftware.com/tooltip]https://plugins.datamaticsoftware.com/tooltip[/url][/color] [b][size=4]🔗[/size][/b][b] Editor: [/b][color=rgb(0, 102, 204)][url=https://bubble.io/page?version=live&type=page&name=tooltip&id=segongora-testing&tab=tabs-1&subtab=Plan]https://bubble.io/page?version=live&type=page&name=tooltip&id=segongora-testing&tab=tabs-1&subtab=Plan[/url][/color]
Setup Instructions
This are step-by-step instructions on how to get the plugin working on any Bubble App.
- Add this plugin to your application.
- Add the element 'Tooltip' into your Editor
- Set the ID of the element you want to have a tooltip on
- Customize the properties in the element you want for your Tooltip, and include the same Element ID
[b][size=4]🧑🏻💻[/size][/b][b] Demo:[/b] [url=https://plugins.datamaticsoftware.com/tooltip]https://plugins.datamaticsoftware.com/tooltip[/url] [b][size=4]🔗[/size][/b][b] Editor: [/b][url=https://bubble.io/page?version=live&type=page&name=tooltip&id=segongora-testing&tab=tabs-1&subtab=Plan]https://bubble.io/page?version=live&type=page&name=tooltip&id=segongora-testing&tab=tabs-1&subtab=Plan[/url]
Full Documentation
The Tooltip element offers the following customizable properties:
[ml][ul][li indent=0 align=left][b]Element ID:[/b] The defined ID of a Bubble element. 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, even though in the Demo all elements have the same ID, this is a really bad practice as explained by [/color][color=rgb(102, 163, 224)][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]Allow HTML: [/b][b][color=rgb(81, 81, 104)]Determines if [/color][/b][color=inherit][b]content[/b][/color][b][color=rgb(81, 81, 104)] strings are parsed as HTML instead of text.[/color][/b][/li][li indent=0 align=left][b]Contet:[/b] [b][color=rgb(81, 81, 104)]The content of the tooltip.[/color][/b][/li][li indent=0 align=left][b]Placement:[/b] [b][color=rgb(81, 81, 104)]Positions the tooltip relative to its reference element.[/color][/b][/li][li indent=0 align=left][b]Trigger:[/b] [b][color=rgb(81, 81, 104)]The events (each separated by a space) which cause a tooltip to show.[/color][/b][/li][li indent=0 align=left][b]Animation: [/b][b][color=rgb(81, 81, 104)]The type of transition animation.[/color][/b][/li][li indent=0 align=left][b]Arrow: [/b][b][color=rgb(81, 81, 104)]Determines if the tooltip has an arrow.[/color][/b][/li][li indent=0 align=left][b]Delay: [/b][b][color=rgb(81, 81, 104)]Delay in ms once a trigger event is fired before a tippy shows or hides.[/color][/b][/li][li indent=0 align=left][b]Follow Cursor: [/b][b][color=rgb(81, 81, 104)]Determines if the tooltip follows the user's mouse cursor.[/color][/b][/li][li indent=0 align=left][b]Background Color: [/b][b][color=rgb(81, 81, 104)]Determines the tooltip background color.[/color][/b][/li][li indent=0 align=left][b]Text Color: [/b][b][color=rgb(81, 81, 104)]Color of the text inside the tooltip.[/color][/b][/li][li indent=0 align=left][b]Hide On Click: [/b][b][color=rgb(81, 81, 104)]Determines if the tippy should hide if a mousedown event was fired outside of it (i.e. clicking on the reference element or the body of the page).[/color][/b][/li][li indent=0 align=left][b]Interactive[/b]: [b][color=rgb(81, 81, 104)]Determines if the tippy is interactive, i.e. it can be hovered over or clicked without hiding.[/color][/b][/li][/ul][/ml]