Custom Tooltip Hover

Need help
4

@JeffWalker finally getting around to putting this up for you. Feel free to send a screenshot from Discord if this doesn’t work how you’d like, but I suspect it can be customized for what you want.

Backstory: Bubble’s built-in tooltips were not going to work how I needed, so I had originally tried the two tooltip plugins that exist. Neither works consistently in all situations though, and when I saw that others had reported the same thing, I opted to use the Tippy library directly instead (one of the plugins was based on an older version of this).

Here’s a screenshot of how it looks in my app:
Screenshot-2021-03-23 13_48_38

Using it is fairly simple:

  1. Install the Toolbox plugin (Toolbox Plugin | Bubble)

  2. Under Settings > General, turn on the option “Expose the option to add an ID attribute to HTML elements”

  3. On the page where you want the tooltip, edit the page object and under Page HTML Header, insert the following:

<body>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
</body>
<link 
  rel="stylesheet"
  href="https://unpkg.com/tippy.js@6/themes/light-border.css"
/>

  1. On the object that you want to have the tooltip on, add a unique ID attribute (ex: tooltip1)

  2. Under Workflow, when the page is loaded, add an action for Run Javascript (this is where the Toolbox plugin comes in), and then insert the following:

tippy.setDefaultProps({
delay: [50, 200],
interactive: true,
interactiveBorder: 10,
placement: ‘right’,
popperOptions: {
modifiers: [{
name: ‘flip’,
options: {
fallbackPlacements: [‘top’, ‘bottom’, ‘right’],
},
},]
}
});

tippy(‘#tooltip1’, {
content: ‘This is my tooltip.’,
theme: ‘light-border’,
appendTo: () => document.body, //needed if
//interactive=true results in a narrower
//tooltip
});

The #tooltip1 should be the ID attribute you entered in step 3.

  1. Repeat that last block of code for every tooltip you want on the page, altering the #tooltip1 and the content for what you need.

Some other info. The tippy and popper options used above in step 4 are what I needed, but if you want yours to work differently, there are lots of options and good documentation for Tippy and Popper can be found here:

You can find other themes for Tippy at the first link too.

The one odd thing is on the page header you need to use BODY tags. I forget what forum post I found that in, but this is because Tippy needs to be loaded in the body rather than the header, but trying to load it in the body on Bubble doesn’t work. Even though this is bad HTML, all browsers seem to handle it fine.

7 Likes