Tooltip content width

Hi all, 

When I use "Tooltip", the "First Name" input field automatically got shrunken to a smaller size.

Can you help me on how to adjust it to have the same size as other containers (Last Name, Birthdate, Email) ??

Thank you.



Solution

Ahh, I am very really sorry. I understood this totally wrong. Sorry for the confusion. I have tried this in correct way now - 

Actually, the input box is getting smaller because of Tooltip Placeholder takes the place (If we follow the ToolTip Structure).


So, to correct this we will need to set width 100% to the tooltip and its block.  


Please add below CSS in your style editor 

.tooltip-content { width: 100%; }

.tooltip { width: 100%; }


It will work.

Hello Quoc

In the Properties of ToolTip we do not have direct option to handle the width. You can do this using the Extended Class. 


Please add your CSS Class and manage width of ToolTip in the same class. 

.tooltip {

  width: 150px;

}

mvp_badge
MVP

The question is not about the width of the tooltip. The question is why the input was less width after adding the tooltip widget.

Solution

Ahh, I am very really sorry. I understood this totally wrong. Sorry for the confusion. I have tried this in correct way now - 

Actually, the input box is getting smaller because of Tooltip Placeholder takes the place (If we follow the ToolTip Structure).


So, to correct this we will need to set width 100% to the tooltip and its block.  


Please add below CSS in your style editor 

.tooltip-content { width: 100%; }

.tooltip { width: 100%; }


It will work.

@Manish Gupta @Daniël Kuhlmann Yes it works, exactly what I am looking for. thank you for your help :).

mvp_badge
MVP

As  you see it is only a visual change on the screen canvas, if you would run your application the length of the inputs would be equal, also without the additional CSS.

Is the proposed CSS change working for you? As it affects the length of the tooltip and not the length of the input box.

Honestly, I believe you should not add any CSS, as the tooltip on the screen canvas is styled with a purpose right to the input, so that you have tooltip and input visible on design time. On runtime the input will automatically have the correct length.

Hello Daniel 

When we are publishing the application without CSS, the Input box is not of correct length. It is visible like how Quoc has shared in the Post Screenshot. 


You are correct that input box is still 12col or fill width but the Content Placeholder of Tooltip is causing the width for Input Box. So, to control that I tried to put CSS in tooltip block and it worked. 


Here is the Sample URL: https://personal-9qwkrkgl.outsystemscloud.com/ForumHelp/Screen1?_ts=637580523964484614


I added CSS on the Screen level


I would like to hear if there is something more appropriate to use and achieve the goal. 

Many Thanks  

mvp_badge
MVP

I am kinda surprised that the tooltip also effects the length of input when running the app. The additional CSS fixes it, but it shouldn't be needed in my honest opinion.

Honestly, I believe you should not add any CSS, as the tooltip on the screen canvas is styled with a purpose right to the input, so that you have tooltip and input visible on design time. On runtime the input should automatically have the correct length.

I will check this with OutSystems

mvp_badge
MVP

Hello Quoc,

Open the wishes tree of your screen and make sure the input widget and the tooltip don't share the same parent container.

The next thing you should check that the input property width is set to the same value as the other properties.

If that does not fix it please share an OML, as this is easily fixed when someone can look at the widgets properties of the screen.

Regards,

Daniel

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