61
Views
6
Comments
Solved
[OutSystems UI] [OutSystems UI] Tooltip doesn't close when clicking on another tooltip
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Previously I had a problem with tooltip, this one:

https://www.outsystems.com/forums/discussion/93571/outsystems-ui-tooltip-with-buttons-inside-not-working-using-the-trigger-onclick/

It was solved by adding the data attribute data-allow-event-propagation = True.

Now, after the update, if this property is set, if I press to open the tooltip and then press on another one, both remain open. 


but if I remove the data-allow-event-propagation property from the buttons the issue is solved, but the previous problem:

https://www.outsystems.com/forums/discussion/93571/outsystems-ui-tooltip-with-buttons-inside-not-working-using-the-trigger-onclick/

 happens again.

Can someone help me?


Thanks in advance.

2022-01-13 11-39-41
Bernardo Cardoso
Staff
Solution

Hi Fábio,

Thank you for the oml! 

Clickable items inside tooltips isn't something we would recommend from the start, from UX perspective and although we try to make it work, there will always be some scenario that won't be covered and work as expected!

For these situations, I advice adding pointer-events: none to the element that is causing the issue. In this case are the icons inside the button, so adding this CSS should fix the issue:

.osui-tooltip__balloon-wrapper__balloon i {

    pointer-events: none;

}


I attached the oml with this workaround!


Best regards,

Bernardo

TooltipIssueV2_Workaround.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Fábio Santos 

To make this more efficient and collaborative for the community please share a sample OML where that issue can be reproduced. 

That way someone from the community can take a look without investing more time in implementing the use case.

Cheers,
GM

2021-07-01 15-11-45
Fábio Santos

Hi,

Here is the OML.

 

Thanks 

TooltipIssueV2.oml
2022-01-13 11-39-41
Bernardo Cardoso
Staff
Solution

Hi Fábio,

Thank you for the oml! 

Clickable items inside tooltips isn't something we would recommend from the start, from UX perspective and although we try to make it work, there will always be some scenario that won't be covered and work as expected!

For these situations, I advice adding pointer-events: none to the element that is causing the issue. In this case are the icons inside the button, so adding this CSS should fix the issue:

.osui-tooltip__balloon-wrapper__balloon i {

    pointer-events: none;

}


I attached the oml with this workaround!


Best regards,

Bernardo

TooltipIssueV2_Workaround.oml
2021-07-01 15-11-45
Fábio Santos

Hello,

First of all, thank you for your time.

I was checking the solution that you mentioned but it still happens. So if I press the Tooltip 1 and then the Tooltip 2, the Tooltip 1 remains open.

2022-01-13 11-39-41
Bernardo Cardoso
Staff


Hi Fábio,

The fix I suggested was for the bottom example, without the data-allow-event-propagation. That should be closing the current tooltip and still trigger the inner button event.


Best regards

2021-07-01 15-11-45
Fábio Santos

Hi Bernardo,

Got it, it's working. 

Thank you! 


Best regards

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.