[OutSystems UI] Why does a using the tooltip widget effect the input widget width
Forge component by OutSystems R&D
Application Type
Reactive

Why does a using the tooltip widget effect the input widget length not only on the design canvas (which is correct) but also runtime?


In attached OML I have 2 columns, in each one an input. On the first input I added another class to make the tooltip full width, so it occupies the full 12 columns of the design systems.


Only then the input also shows as 12 columns width. The input with toolbox in the second column shows the input on screen as 6 columns width.


Am I missing something, but that is not correct, right?

PlaygroundReactive1.oml

Hello Daniel.

Can you please explain me your use case to have an input inside a tooltip? Despite the issue mentioned, just to get the idea, since the use case is usually to have an icon for instance and not clicking/hovering an input.
In the meanwhile, I'll try to understand the issue.

Best Regards,
GM

Hi Daniel,

This is as expected behaviour, if you look at our CSS (OutSystemsUI theme) you'll be able to see that we're using a display inline-block assigned to the tooltip, that is the default behaviour for this kind of pattern, otherwise independent of his place it was 100% width, and we don't want that in most of the cases.

If you want to change this behaviour specifically for this case, I'll say that the best option for now is to create an custom class, add it in your theme and assign it at the ExtendedClass tooltip parameter, this way you will be able to use that style across you application.

Example:

.tooltipFullWidth {
width: 100%;
}

.tooltipFullWidth .tooltip-content {
width: 100%;
}


That said, we can internally check if this a behaviour that the tooltip should have in this cases by default, if so, we'll improve it in that way :)

Hope this could help you.

Thanks for your feedback :)

Screenshot20210817at12.09.44.png

Hello Daniel.
Any feedback on this topic? We would like to have some follow up on this to try to understand the impact, pros/cons.

Best Regards,
GM

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