Custom Tooltip Hover

JeffWalker · 2021-02-08T13:09:19.594Z

Is it possible to have a tooltip similar to the discord badge ones?

shawnmollen · 2021-03-08T21:16:35.902Z

@JeffWalker Not sure if you have figured this out, but I use tooltips in my app. I do not like the built-in tooltips and found the two tooltip plugins to work only sporadically (others confirmed) and did not have an ideal way to work with both mobile and mouse. I can write up what I did, but I don’t have discord so don’t know what theirs are like. Is it similar to what you see on the login & language icons at the top of https://discordia.me/en/home ? If not, can you paste a screenshot?

(Sorry for the double-post - realized I was logged into the wrong account.)

shawnmollen · 2021-03-23T18:41:13.093Z

@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:

Using it is fairly simple:

Install the Toolbox plugin (Toolbox Plugin | Bubble)
Under Settings > General, turn on the option “Expose the option to add an ID attribute to HTML elements”
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"
/>

On the object that you want to have the tooltip on, add a unique ID attribute (ex: tooltip1)
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.

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:

Tippy: Tippy.js - Tooltip, Popover, Dropdown, and Menu Library
Popper: https://popper.js.org/

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.

system · 2021-04-19T13:10:08.648Z

This topic was automatically closed after 70 days. New replies are no longer allowed.