I'm using the Outsystems UI Tooltip with a button inside the content placeholder and everything works fine on maximized browser window.When I load the same page on a smaller windows/resolutions, for example, 800px*500px, the Tooltip shows onClick, preventing me from clicking the button.After some investigation I discovered that on fullscreen the div with class 'osui-tooltip__content' as two events: 'mouseenter' and 'mouseleave' but when loaded on a smaller screen it only has the 'click' event.Having said that when I try to click on the button it clicks the tooltip instead, not triggering the button expected behavior.
Is this the expected behaviour for the Tooltip component? If yes, is there a workaround to overcome this so I can trigger the button click?Using Outsystems UI 2.16.0
Thanks
@Leopoldo Ismael ,
your problem is that on a mobile, there is no such thing as hover, so OS made the (undocumented) choice to in those cases attach the opening of the tooltip to the click instead of the hover, making your button loose it's click functionality.
I personally think, not showing the tooltip in that case, but still allowing the button to work, would have been a better thing.
You will have to think about what you want to happen in the mobile device, and explicitly replace the default by that. See attached oml for an example, the red container on top is showcasing what you experience, the green container below it, is showing a possible solution, where you leave everything as is in a laptop, but you have alternate content with the tooltip attached to only an '?' icon inside the button instead of the entire button.
Dorine
Hi @Dorine Boudry
I totally agree with what you said and I end up with a solution similar to the one you share in the .oml
Thank you all for your inputs
Hello @Leopoldo Ismael
Can you please share a working example oml? And try to explain that use case that doesn't seem to be the most UX-friendly for a tooltip. Have you tried the Overflow Menu component instead?
Cheers,GM
Hi @Leopoldo Ismael,
That's an expected behaviour. Why? At those small resolutions you mention, OSUI is assuming you are on a tablet device, where there is no hover events.
That's why OSUI is not adding those events in order to avoid multiple events for the same behaviour. At mobile devices, hover => click, like CSS hover styles for example, at mobile devices they occur at onClick...
Cheers,JR
Hello
Will try to create an .oml
My case is not the best UX, that I must agree with, but working this way, the tooltip behavior is blocking the click of any element inside it, correct?
Indeed it is!
In order to allow clicking in elements inside tooltip, you can use data-allow-event-propagation='true' attribute assigned to those elements having a click.
As you mention this is not the expected behaviour, but this is a workaround for it!
Hi José
where does this attribute need to be added? on the Tooltip itself? or on the elements inside the Tooltip content?The Tooltip does not allow for attributes to be added, and I try to add the attribute on the elemente inside, but with no success.Do I need to create a custom tooltip so I can add the attribute?
Hi @Leopoldo Ismael
You need to add it to the HTML element with which you want to interact with.Imagine a list where you want to click on each list item to do something.Just add it to the trigger of that action which is the List Item:
Remember that this is a fallback to unblock an edge case that from a UX standpoint, we don't want to offer since is not according to the best practices.
Hope it helps.
Hi Gonçalo
The element I wanto to interact is not inside the Tooltip placeholder, its inside the Content, in the example you gave, I have a button where you have the Icon element, which the I am not able to click when the Toolip pattern is rended on mobile/tablet.
I've tryied to add the data-allow-event-propagation='true' to my button inside the Content placeholder, but the button click is not triggered.
Why do you need that? I would say that to achieve that behaviour you should place tooltip inside your button, and not a button inside a tooltip...
Hope it helps,