Outsystems 10 Changing Balloon Class

Hello everyone, i am having trouble in defining a new Class for the widget balloon in Outsystems10, i have tried the following:

" document.getElementById(' " + BalloonName.Id + " ').className = ' TheClassYouWant ' ; " 

on the onclick event of the Container above the Balloon and it didnt work, keep in mind this balloon is in a web block.

The class is defined in the web block style sheet.

Anything i am doing wrong?

Also tried giving a class to the container above it to override the other and it also does not work.

The only way i am able to do it is to clone the WebPatterns parts where the balloon is used, but i know it isn´t the best approach. 

Can anyone help? 

Thank you for your time and patience.

Rank: #174

Hello Pedro,

Is there a space between your ' and your " in document.getElementById?  I would try something like:

"document.getElementById('" + BalloonName.Id + "').className = 'TheClassYouWant';"

Also, do you receive any error in the browser's Console when your code is executed?

Rank: #174

Hey Pedro,

I did some experimenting and the problem is that the div with the Balloon class is not identified by the widget identifier.  For example, I put together a demo and my Balloon's Id is:


But when I inspect the div of the balloon, it is different:

So, try this instead:

"document.getElementById('" + BalloonName.Id + "_wtContent').parentNode.parentNode.className += ' TheClassYouWant';"

We are finding the content div, going up 2 parent nodes to get to the div with the Balloon class, and then appending an additional class.

Does that work for you? (Note that there is a space before TheClassYouWant since I am appending, but the width of the forum seems to put a line break there)

Hello Pedro,

I think the giving the surrounding container a class approach should work if you target the right classes. 

I believe the WebPatterns/SilkUi balloon background color can be targeted like this:

.tooltipster-content {   background-color: yourColor;   }

.tooltipster-arrow span {border-color: transparent;   }

body .tooltipster-arrow span {   color: yourColor;   }

Adding a class to the container and to these classes will limit the changes to the targeted balloons. 

Rank: #174

Hey Pedro,

It looks like your second parentNode has a capital P (ParentNode), which will not work.  Can you change it to a lowercase?

Rank: #90

HI Pedro,

as i am seeing here is a option ExtendedClass in Balloon property. dont know this is availabel in older version or not.

Also you can override .balloon class

Hope this will help you.



Rank: #174

Hey Pedro,

I think I've got it figured out!

We can see how the tipster is initialized in our page's HTML:

And, unfortunately, tipster seems to rebuild the div each time:

That said, we can use tipster to modify the theme after the fact.  I was able to add a Balloon2 theme, which has a background-color of red and does not present with the flashing you show in your gif by doing this:

$('#LisbonTheme_wt29_block_wtMainContent_wtButton2').tooltipster('option', 'theme', 'Balloon Balloon2')

Notice that I'm going against the Id of the element that my Balloon is attached to, and not the actual Balloon Id itself.  You should be able to do the same with:

$('#" + UserDetailContainer.Id + "').tooltipster('option', 'theme', 'Balloon UserBalloon');

Make sure to keep Balloon in there or you might lose the Balloon class.

Does it work??

EDIT: You probably need to execute that in a $(document).ready() after the page is done being loaded.

Rank: #174

Hello Pedro,

Just following up - did that help?