690
Views
11
Comments
Solved
[OutSystems UI] Tooltip: how to show  tooltip message appear in both click and hover ?
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

I have a requirement of using a tooltip and displaying message . the message should be displayed when we hover and click on the content.
How to achieve this. 

I have tried the tooltip and also set the trigger to onhover and onclick . But I want that the message should be displayed onclick and onhover.
How to achieve this?

Thanks in advance.
Regards

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Avinash,

I have observed that the underlying implementation for the Tooltip widget in the Latest OutSystemsUI does cover the use-case which you have mentioned - 'My requirement is the message should be displayed when I hover and click the button. '

Somehow the implementation is not working as expected.

For now, I do have a workaround to suggest. 

  • Define a Tooltip Initialized handler
  • In the Tooltip Initialized handler flow, register a click handler to the Tooltip content explicitly using the JS node

Javascript Snippet:

var tooltip = OutSystems.OSUI.Patterns.TooltipAPI.GetTooltipById($parameters.TooltipWidgetId);

tooltip._tooltipContentElem.addEventListener('click', function(e) {
    e.stopPropagation();
    tooltip.open();
});

Demo screen: Tooltip_Task

Refer to the attached oml.

To notify the OutSystems team about the suspected issue, I'm tagging the OutSystemsUI to this post.

I hope this helps you!


Kind regards,

Benjith Sam

NeoLab_Tooltip_Task.oml
2021-04-17 09-53-48
José Gonçalves

Hi Avinash,

clicking the content doesn't mean you are already hovering it?

Regards

2024-09-06 07-21-49
Avinash Shukla

Hello Jose,
Thanks for your reply.
Actually I have to show tooltip on both Onhover and Onclick ? Same message should be displayed. But in the trigger property of Tooltip we can use either of it.
I want to use both the event Onhover and Onclick.

Regards

2021-04-17 09-53-48
José Gonçalves

I see now how the widget works.

I'm still confused on why do you both... Before clicking you are already hovering it, so the tooltip will show both on hover and click by just selecting Entities.Trigger.OnHover.

2023-11-22 10-51-50
Jozy Sohail

Hi @Avinash Shukla , as @Jose said you are already hovering while clicking, just make IsHover = true for tooltip, it will work for both click and hover.

Hope it helps,

Regards,

Jozy.

2024-09-06 07-21-49
Avinash Shukla

Thanks for your Reply, but as you can see I can't see the  IsHover property.

Regards
Avinash

2021-04-17 09-53-48
José Gonçalves

You can't see because you are using the recent version of the widget, the other is deprecated.

From where you are, just need to select OnHover.

2024-09-06 07-21-49
Avinash Shukla

But If I select OnHover then the tooltip message is displayed only when I hover over the Button, And when I click the button the tooltip message disappears.

My requirement is the message should be displayed when i hover and click the button.

RegardsAvinash

2021-04-17 09-53-48
José Gonçalves

You can try the deprecated version of Tooltip and use the IsVisible property to control it. Assign a variable to it, and set it to True when the user hovers and clicks. Don't forget to set to False when you want to unsee it.

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Avinash,

I have observed that the underlying implementation for the Tooltip widget in the Latest OutSystemsUI does cover the use-case which you have mentioned - 'My requirement is the message should be displayed when I hover and click the button. '

Somehow the implementation is not working as expected.

For now, I do have a workaround to suggest. 

  • Define a Tooltip Initialized handler
  • In the Tooltip Initialized handler flow, register a click handler to the Tooltip content explicitly using the JS node

Javascript Snippet:

var tooltip = OutSystems.OSUI.Patterns.TooltipAPI.GetTooltipById($parameters.TooltipWidgetId);

tooltip._tooltipContentElem.addEventListener('click', function(e) {
    e.stopPropagation();
    tooltip.open();
});

Demo screen: Tooltip_Task

Refer to the attached oml.

To notify the OutSystems team about the suspected issue, I'm tagging the OutSystemsUI to this post.

I hope this helps you!


Kind regards,

Benjith Sam

NeoLab_Tooltip_Task.oml
2024-09-06 07-21-49
Avinash Shukla

Thanks @Benjith Sam for your reply and help.

Regards 

Avinash Shukla

2021-03-18 21-03-15
Benjith Sam
 
MVP

You're welcome, Avinash.

Glad to help you :)


Kind regards,

Benjith Sam

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