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
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
Thanks @timmse. That works. 
Great!
Perhaps the documentation should be supplemented @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
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.
Same for me 
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.
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.
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
Hi Brian,
Thanks so much for bringing this to our attention!
Yes, it appears that the balloon position attributes have changed over time. If we did this as well, every user would have to manually adjust their tooltips. That’s why we’re sticking with the “old” version.
You can already style the tooltips to your liking by adding/overriding styles to [data-balloon]:before and [data-balloon]:after, but yes, we can certainly mention that in the Academy article.
--bricks-tooltip-bg: red;
--bricks-tooltip-text: white;
this seems to work on my backend but not my front?
