Simply install this plugin and your tooltips will automatically refresh your existing tool tips into a more modern design.
View the editor here: https://bubble.io/page?id=tippy-tooltips

Default settings
You can set global defaults for your tooltips in the Plugin Settings section of the Bubble editor.
1. Go to the Plugins tab
2. Select the Tippy Tooltips plugin
3. Under the "Currently installed version" dropdown you'll find the Plugin Properties you can change.

You can configure different defaults for development and live versions.

If a value is mistyped, Tippy Tooltips will safely fall back to a preset default. In debug_mode=true, a warning will be logged to the console.

The list of values (attributes) for each of these properties can be found below. These attributes are case sensitive.


Attributes
Below are the attributes available to each property to be used in the plugin settings AND at the individual tooltip level.
If a property is left blank in the plugin settings, the tooltip property will revert to its default attribute.
Attributes are CASE SENSITIVE.

🎨 Theme 🎨
--- light
--- light-border
--- material
--- transluscent
When blank, the default "Tippy" theme will be used.

📍 Position 📍
--- top (default)
--- right
--- bottom
--- left
Under the Position property, you can also append either "-start" or "-end" to each of these, for example top-start to position the tooltip on top of the reference element and at the start of the element.

🚀 Animation 🚀
--- shift-away (default)
--- shift-toward
--- scale
--- perspective
--- no-animation
--- fade

🔽 Arrow 🔽
--- default (default)
--- hidden
--- round

📐 Offset 📐
This setting expects 2 numbers, seperated by a space.
Format: x y

x = "Skidding" - offset along the same axis as the reference element.
y = "Distance" - how close/far away from the reference element the tooltip appears.

A positive number puts the tool tip further away, while a negative number allows the tooltip to overlap the reference element.
Default = 0 0

Learn more from the Popper.js website.


Customisations
Apply overrides directly in Bubble’s Tooltip field.

🖋️ Syntax 🖋️
To engage element level customisations, you can use the above properties and attributes wrapped inside square brackets:

  [ ... ]

Properties and attribute pairs can be added in any order within the square brackets.

🔑 Keywords 🔑
You will need to identify the property and the attribute within the square brackets in order for the plugin to recognise what it should be doing. The property and attribute must be in lowercase, and use the following format:

  [ property:attribute ]

For example: [position:bottom]
Will position that tooltip underneath the reference element.

🔗 Daisy chaining 🔗
To target multiple properties within the square brackets, separate each property:attribute pair with a comma:

  [ property1:attribute1,property2:attribute2 ]

For example: [position:bottom,animation:scale,arrow:hidden]
Would put the tooltip underneath the parent element, use a scale animation to hide/show the tool tip and hide the arrow.

🪄 Magic Properties 🪄
These are properties which don't fit the same formatting of the previous properties but can still be used to customise the tooltip.

--- Offset
Doesn't require a property name when being set, just a value for the skidding and value for the distance, separated by a space.

[ property1:attibute1,10 0,property3:attribute3 ]

--- Inertia
This is a standalone flag and adds a slight bounce/spring to the tooltip animation. By default, this flag is omitted (or false).

[ property1:attribute1,inertia ]