Tooltips - balloon.css - No way to style the tooltips?

How To
1

Hey guys, @timmse ,

I initially added a reply to this ticket, but since that’s an old thread marked solved, I’m opening a new one.

I love the idea of the inbuilt tooltips, but unfortunately other then showing the tooltip, there isn’t much else to it.

Your docs point to balloon.css here but none of the features such as styling of the tooltips don’t seem to work as per the balloon.css.

So how can I style the tooltips? How do I make the font bigger? Change background color etc.?

How could I make sure the tooltip is mobile responsive? Currently when the sttribute is set to top-left for example, the tooltip stays in this position regardless of the screen, so on mobile, it goes off the screen.

Many Thanks, Jo

2

Note - I think you’ll need to move this post from ‘bugs’ to ‘How to’, but i have the answers for you…

Like this… (if you’re wanting it to do it for a specific element)

%root%[data-balloon]::after {
  background: red;
  font-size: 30px;
}

or for the whole site…

body [data-balloon]::after {
  background: red;
  font-size: 30px;
}

How could I make sure the tooltip is mobile responsive?

Not possible with CSS solutions for tooltips like this, this is the main limitation of it. I generally use JS for this so it can adapt based on screensize and layout, Tippy is good for tooltips/popovers that can adapt well. Tutorial

3

Thanks so much @wplit , that helps a lot.

Moved to ‘How To’ now.

Jo