225
Views
9
Comments
Solved
Tooltip

Hello,

I want to display this tooltip except if there is a content to display, is it possible ?

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

Hi Jad,

One more approach is to add conditional CSS style class to the Tooltip ExtendedClass property based on the content availablity.

Also define the below-mentioned CSS definition in the stylesheet section.

CSS rule:

.hide-tooltip.osui-tooltip.osui-tooltip--is-hover:hover .osui-tooltip__balloon-wrapper {
    display: none;
}

Demo screen: TooltipTask

Note: Please post your comments in english lanaguage (or use google translate) for other community members to understand and help you better :)

Refer to the attached oml

I hope this helps you!


Kind regards,

Benjith Sam

NeoLab_TooltipTask.oml
UserImage.jpg
Ibtissam MS

@Benjith Sam 

Thank you very much for your answer it helped me it's the solution 

for the language yes I know but sometimes I forget and I write in French thanks for reminding me :) 

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

You're welcome, Jad.

Glad to help you :)


Kind regards,

Benjith Sam

UserImage.jpg
Accelance Partners

@Jad  MS

you want to display tooltip widget on full display? if I am correct. then, you can try inspect that element and apply CSS to it. It will work.

If possible attach image or .oml

Thanks
Shriyash

2023-10-21 19-42-11
Tousif Khan
Champion

Hello,

Did you mean then If you have a content in expression or some data then you want to display the tooltip, if no data then  the tooltip not shown, 

if I am correct  then you can use a if condition and check if data<> ""

then on true branch show the tooltip 

If you are looking for something else, then can you please elaborate your issue or provide oml so we can demonstrate your issue, and reply accordingly


Thanks

Tousif

UserImage.jpg
Ibtissam MS


I tried to do what you told me but it is not possible to apply an if on a tooltip 

how can I do that: 

UserImage.jpg
Ibtissam MS

Bonjour merci pour votre réponse, 

Je veux afficher cette tooltip sauf s'il y'a un contenu par exemple ici y'a rien à afficher donc je veux qu'elle disparaisse

UserImage.jpg
Pranav Shingane

Hi @Jad  MS ,

Is is simple just put your tooltip into if condition and check whether your require field has value or blank. If value is there then put tooltip into TRUE block of IF Condition. And False block will be empty.

Please refer image attached 

Salut @Jad 

MS,C'est simple, il suffit de mettre votre info-bulle dans la condition if et de vérifier si votre champ requis a une valeur ou est vide. Si la valeur est là, placez l'info-bulle dans le bloc TRUE de la condition IF. Et le bloc False sera vide.Veuillez vous référer à l'image ci-jointe

Capture.JPG
2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Jad,

One more approach is to add conditional CSS style class to the Tooltip ExtendedClass property based on the content availablity.

Also define the below-mentioned CSS definition in the stylesheet section.

CSS rule:

.hide-tooltip.osui-tooltip.osui-tooltip--is-hover:hover .osui-tooltip__balloon-wrapper {
    display: none;
}

Demo screen: TooltipTask

Note: Please post your comments in english lanaguage (or use google translate) for other community members to understand and help you better :)

Refer to the attached oml

I hope this helps you!


Kind regards,

Benjith Sam

NeoLab_TooltipTask.oml
UserImage.jpg
Ibtissam MS

@Benjith Sam 

Thank you very much for your answer it helped me it's the solution 

for the language yes I know but sometimes I forget and I write in French thanks for reminding me :) 

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

You're welcome, Jad.

Glad to help you :)


Kind regards,

Benjith Sam

2023-02-09 17-26-57
JD136

One thing...

I recently set up @Benjith Sam 's answer in my app. In the ExtendedClass for the MessageTooltip, I change what was there to this:
If(Trim(EmptyToolTipMessage) = "", "hide tooltip", "")

I was reading this: OutSystems CSS

And noticed it said to reference the class name with a space. Might just be my version, I wasn't too familiar with applying CSS in an OutSystem's app, and thought this might help others.

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