SOLVED: Balloon.css (tooltip) confusion

[Hamish]

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

[timmse]

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

[Hamish]

Thanks @timmse. That works.

[timmse]

Great!
Perhaps the documentation should be supplemented @thomas.

[thomas]

@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

[parktechno]

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.

[mubin]

Same for me
Did you find any solution?

[dwork]

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.

[Arad]

Wrap with a div.

[Bloggs]

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