SOLVED: Balloon.css (tooltip) confusion

Hi

Here you have instructions and attributes for balloon css only tooltips Custom Attributes – Bricks Academy

But the attributes on the balloon site do not work. I’m not sure. Do I add your positions attributes or theirs… Balloon.css — CSS tooltips for HTML elements

An example that works screenshot would be most helpful

Taa!

Thanks

1 Like

Hi @Hamish,
the documentation is a bit misleading. Actually you need two attributes.

Content
Name: data-balloon
Value: Your content goes here

Position
Name: data-balloon-pos
Value: top | top-left | top-right | bottom | bottom-left | bottom-right | left | right

There are two more Attributes you can use:

Change the size of the tooltip

Name: data-balloon-length
Value: fit | small | medium | large | xlarge

Enable word-break and white-space: pre-line (use together with data-balloon-length)
Name: data-balloon-break

3 Likes

Thanks @timmse. That works. :upside_down_face:

Great!
Perhaps the documentation should be supplemented @thomas.

1 Like

@timmse Thank you so much for providing the additional information. I completely forgot to mention the data-ballon-pos HTML attribute. I’ve updated the article accordingly: Custom Attributes – Bricks Academy

3 Likes

HI, @timmse!

If I add a tooltip for an icon, it doesn’t work. The icon itself also disappears on the frontend when I add balloon attributes to it.

Screenshot_1

2 Likes

Same for me :frowning:
Did you find any solution?

Same for me as well. I’m displaying social media icons from a Metabox CPT. Also, and just as bad, when I put a link on the icon (instead of wrapping it with a div and placing the link on the div), some style attributes stop working - e.g. font-size.

Wrap with a div.
image

Hey @timmse @thomas ,

Is there a way (additional attrinute) for changing the font size also?

I’m trying the CSS as described on the balloon.css site, for example --balloon-font-size: 20px; , but that doesn’t seem to work.

Cheers, Jo

@thomas and @timmse - The documention in Bricks Academy vs the Balloon.css is inconsistent - particularly position.
image

vs

It appears that the actual implementation is different than any documentation.

There ARE two variables in the CSS being used:
--bricks-tooltip-bg: red;
--bricks-tooltip-text: white;

However, there are a bunch of other settings that require more complex CSS as described here.

Can you add documenation for this? And also consider making this feature more usable by adding variables for font-family, font-size