Hi everyone!


Has anyone ever had to deal with this?

The tooltip gets cutted by the Tabs Header, i have tried to mess with the position and z-index, but no luck.  Am I missing something?

Hi. What version of the platform are you using? What UI framework (SilkUI or OutSystems UI)? What version of the UI framework? Is this web or mobile?  The more information you can provide, the easier it will be to help.


thanks


Stacey


Hi, 

you can change the position of the Tootip with the parameter "Position", it has 4 possible options listed in the entity 

PositionBase

Hope this help 

Graça

Try adding this:


.tabs .tabs-content {    z-index: auto;}

Stacey Levine wrote:

Hi. What version of the platform are you using? What UI framework (SilkUI or OutSystems UI)? What version of the UI framework? Is this web or mobile?  The more information you can provide, the easier it will be to help.


thanks


Stacey



This is on Outsystems 11 (530) on a mobile app (Outsystems UI)

Stacey Levine wrote:

Try adding this:


.tabs .tabs-content {    z-index: auto;}

Hi Stacey, thank you for the suggestion. I tried that but unfortunately it didn't work...


Maria da Graça Peixoto wrote:

Hi, 

you can change the position of the Tootip with the parameter "Position", it has 4 possible options listed in the entity 

PositionBase

Hope this help 

Graça

Hello Graca, unfortunately that is not an option, but thank you.


Hello JT!

I've replicated the behavior you shared and did some digging to find out what was happening under the hood.

It turns out the tooltip isn't "space aware", i.e. it doesn't know how to correctly position itself to be visible regardless of the circumstances. 

A quick way to solve your problem is to change the tooltip position to the bottom.

Another way is to have some JavaScript code that calculates if the tooltip is visible (e.g. using the getBoundingClientRect model to collect values and check if the "top" property is greater than the height occupied by the header and tabs navigation, which is 100px if I recall correctly), and if it's not change the style to accommodate your needs. For instance, change the classList by removing the "top" class and adding the "bottom" class.

There is probably another way to deal with this but I hope those solutions are enough for you to fix your issue,


Regards,

Carlos Rijo

Hello Carlos,

That looks like a possible solution, but actually i think i just saved the day with just one line of code, try adding the following: 

SyntaxEditor Code Snippet

.tabs .tabs-content {
    display: contents;
}

 and let me know if it works for you,


Cheers!


JT wrote:

Hello Carlos,

That looks like a possible solution, but actually i think i just saved the day with just one line of code, try adding the following: 

SyntaxEditor Code Snippet

.tabs .tabs-content {
    display: contents;
}

 and let me know if it works for you,


Cheers!


Hi JT,


I am glad you were able to overcome that challenge. I tried to add the style you shared in my screen style sheet but it didn't work for me. Perhaps I am missing something or placing it at the wrong place. I kindly ask you to submit the challenge you faced through the "Submit Feedback" option on ServiceStudio (next to the "Redo" button). Feedback is really valuable and helps the product improve. Thanks a lot!


Cheers!


JT wrote:

Hello Carlos,

That looks like a possible solution, but actually i think i just saved the day with just one line of code, try adding the following: 

SyntaxEditor Code Snippet

.tabs .tabs-content {
    display: contents;
}

 and let me know if it works for you,


Cheers!


Hi JT, 


Beware that display: contents will not work for all the browsers. You can, read more here.

My suggestion is to reset some values from BaseTheme.css

.tabs-header {
    z-index: initial;
}

.tabs-content {
    overflow: initial;
}

Let me know if this works for you :)


Regards


Hello Jose, thank you very much for your reply.

Currently I do not have the time to test your option, but i bet it will probably work. As soon as i have the time I will test it though and provide some feedback here.

I did have some concerns too regarding the use of the contents property, but its working great on iOS and Android, and those are the 2 "browsers" the mobile app is supposed to work, so I am very happy with the results (and so is the customer). 

Cheers.