Tooltip in reactive web apps

Hi there again! :)

I'm looking to add a simple tooltip or perhaps a balloon to a page using reactive web apps.

I tried by adding the 'Conten\Tooltip' widget.
That works well on hover, but when I move my mouse away. the tooltip doesn't disappear.

Is this tooltip only supported in Traditional Web Apps?
And if so, how do I make the tooltip go?

A second question: is it possible to set a max-width for the wrapper that also breaks the text into multiple lines?

Thanks in advance!


Hi Marleen,

The Content/Tooltip is indeed the one you're looking for. Note that for Reactive Web, all Widgets are specifically for Reactive, the "old" Widgets are in OutSystems UI Web, not OutSystems UI. I'm not sure what the behaviour of it is supposed to be (can't recall what it does on Traditional Web).

As for your second question, CSS is your friend.

Hi Marleen,

That's strange that the tooltip doesn't disappear. I've just put together a quick test with the Tooltip pattern and it works as expected. That is, the tooltip is displayed when I hover over whatever's in the "Content" placeholder and automatically disappears when I move the mouse away. Did you set the tooltip's "IsHover" property to true? What kind of content do you have in the tooltip's placeholders?

As for your second question, as Kilian stated, you can easily do this with some CSS. Use the "tooltip-wrapper" class and the "max-width" property to do it.

I'm having the same issue.  My IsHover is set to true, the content is a simple container with text.  But on a Reactive Web App when moving the cursor away, the tooltip remains on the screen.  I am using Content/Tooltip found in OutSystemsUI

@Aurelio are you using a Reactive Web App or a traditional Web App?


Hi Marleen and Jared, 

The Version 2.2.7 of OutSystems UI includes the fix regarding the Tooltip. Are you using the latest version?