SOLVED: Balloon.css (tooltip) confusion

#1

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

#2

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

1 Like
#3

Thanks @timmse. That works. :upside_down_face:

#4

Great!
Perhaps the documentation should be supplemented @thomas.

1 Like
#5

@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

2 Likes