Tooltip - change style on the app level

Could we define the tooltype style at the app level in Settings / Design, so we can have good-looking tooltips like here :

9 Likes

That would be awesome!

I think this is actually different than the “tooltip” that is displayed when hovering a menu.

But we indeed need a “tooltip” element in the UI, some kind of a mix between floating group and focus group that could be attached to an element and only shown when hovering this element or the tooltip itself.

I would thus suggest to change this thread title to something like “Adding a tooltip element in the UI designer”

Note that this feature has already been asked in the following posts:
http://forum.bubble.io/t/does-bubble-support-tooltips/6536
http://forum.bubble.io/t/dynamic-text-with-ajax-tooltips/8535/3
http://forum.bubble.io/t/easy-tool-tips-in-the-editor/7918
http://forum.bubble.io/t/how-to-get-hover-effect-from-title-attribute-with-links-and-icons/2638/6

Some solution might be to use a conditional “when X is hovered make this element visible” on a floating group, but then it would not be placed relatively to a specific element (as opposed to what is expected for tooltips), which causes responsiveness issues.
On the othe rhand, focus groups can be positionned relatively to an element, but do not have a “make this element visible” action in the conditional pannel…

This request is somehow related as well to other requests looking for navigation menus that show when a menu item is hovered.

+1 for adding that !

3 Likes

why not use the css on
https://www.w3schools.com/css/css_tooltip.asp ?

Because Bubble is supposed to be for non-coders, and having the possibility to show floating groups on hovering would open many more possibilities.
Also, this would require using an HTML element instead of any bubble element (what if I want to show a tooltip when a Buble button is hovered, or any other widget ?)

2 Likes

this would be amazing. count my vote in :slight_smile:

Count me in too… I think it is probbbaly the same style for the bubble chart tool tip

Yes! I’d love this capability! I haven’t been able to do it a couple of ways because:

  • With Floating Groups: It’s a good option because it wont push/move other inline items. Bad because it does not appear or disappear on hover events (at least it wasn’t working for me) and like @florent.bocquelet said I guess it’s not relative.
  • with un-clickable Buttons: a good option for short tooltips because the on hover action doesn’t push/move elements above or below it. But any tooltip that requires multiline text will look bad since the input doesn’t allow carriage returns and you can’t define horizontal padding
  • with a text box: Good because you can define horizontal padding / make everything look good but it’s bad because it does push/move other inline elements.
  • with a default tooltip: Good because it works… Bad because it’s appearance is ugly / immutable for the non coders. Also bad because the time it takes to appear is somewhat long (would be nicer if it were immediate visible or if the time it took to appear was tunable).

So there’s no single element that combines all the things we’d (I’d) like to have in a good tooltip element.


https://puu.sh/CQETY.png

2 Likes

Tool tip in bubble chart plugin is must be . Customizable.

Nice work getting this! And finally, to hide the tooltip one needs an additional workflow for hiding the shape when the thing of interest is not being hovered over. I wonder if this solution is round about enough to warrant Bubble making a dedicated tooltip element (or at least a customization feature as requested by OP). Still, thanks for the solution!

Just to add my 2 cents:

If bubble adds a way for group focus to change ref. element with workflows, we can all make our own tooltips with sweet svg animations that will floor our users into throwing money at us. And so much more. I am tired of having eleventy groupfocus items, or just plain ugly tootips.

@anon65040322 Tangent:

You can copy the conditional “when [item]is hovered” from the editor and paste it into the workflow item you want. @petter taught us that :slight_smile: I’ve been using it loads and it works really well. Don’t forget to change the workflow thing to “every time” I spent probably 15mins debugging that :frowning:

image
image
image

you can add hide all tooltips or build a custom workflow to hide “if showing” when “PAGE” is hovered. That’s what I do, works like a dream.

See my reply to Beau for pasting hover conditionals.

i already know about that method, its not consistent.

Oh nO!

When I first read about it the OP mentionned that he didn’t know if it was “officially supported” by bubble. I ran a few tests and everything has been fine for me since :frowning: If you have a minute or two would you mind sharing what you’ve found that breaks it, or in which situations it doesn’t work to avoid me big future headaches? If not I’ll try a bunch more stuff and eventually write a post about it.

1 Like