Hello everyone!


I've been having some trouble while trying to position my tooltip as wanted and wondered if any of you could help. I've tried setting a higher z-index or a position:absolute and couldn't make it work.


This is how it looks... "satisfeitos com as entregas" is not the beginning of the sentence, so the tooltip is kind of being "cut" from the top.

Any ideas?

Thank you in advance :)


EDIT: I forgot to tell you that the green box is inside a web block, where it contains the tooltip. The web block itself its inside a list, and that is where the message is being "cut".

Polito wrote:

Hello everyone!


I've been having some trouble while trying to position my tooltip as wanted and wondered if any of you could help. I've tried setting a higher z-index or a position:absolute and couldn't make it work.


This is how it looks... "satisfeitos com as entregas" is not the beginning of the sentence, so the tooltip is kind of being "cut" from the top.

Any ideas?

Thank you in advance :)


EDIT: I forgot to tell you that the green box is inside a web block, where it contains the tooltip. The web block itself its inside a list, and that is where the message is being "cut".

 

 Hey Polito,


I am not sure if you tried the z-index this way. Could you please try this one out? It's the Advanced Format way.

(Reference: https://atomiks.github.io/tippyjs/v6/all-props/ )


Polito wrote:

Hello everyone!


I've been having some trouble while trying to position my tooltip as wanted and wondered if any of you could help. I've tried setting a higher z-index or a position:absolute and couldn't make it work.


This is how it looks... "satisfeitos com as entregas" is not the beginning of the sentence, so the tooltip is kind of being "cut" from the top.

Any ideas?

Thank you in advance :)


EDIT: I forgot to tell you that the green box is inside a web block, where it contains the tooltip. The web block itself its inside a list, and that is where the message is being "cut".

 Hi Polito,

Can  you check any float you are applying on container ?. Wrap your web block in container and check

Hope this help

Thanks

AD



 

Solution

Hi Polito,

I suspect it is the overflow:hidden of the list that creates problems for you.

In Outsystems UI there's this


.list.list-group{

     overflow:hidden;

}


So try with something like this in your screen css (or maybe you'd like a more specific selector...)


.list.list-group{

    overflow:visible;

}


Hope this helps,

Dorine

Solution

jomicobasi wrote:

Polito wrote:

Hello everyone!


I've been having some trouble while trying to position my tooltip as wanted and wondered if any of you could help. I've tried setting a higher z-index or a position:absolute and couldn't make it work.


This is how it looks... "satisfeitos com as entregas" is not the beginning of the sentence, so the tooltip is kind of being "cut" from the top.

Any ideas?

Thank you in advance :)


EDIT: I forgot to tell you that the green box is inside a web block, where it contains the tooltip. The web block itself its inside a list, and that is where the message is being "cut".

 

 Hey Polito,


I am not sure if you tried the z-index this way. Could you please try this one out? It's the Advanced Format way.

(Reference: https://atomiks.github.io/tippyjs/v6/all-props/ )


 

 Hi jomicobasi!

Thank you for your reply, but this unfortunately did not help :(

It still stays the same, even though I applies the zindex in the Advanced Format.



Dorine Boudry wrote:

Hi Polito,

I suspect it is the overflow:hidden of the list that creates problems for you.

In Outsystems UI there's this


.list.list-group{

     overflow:hidden;

}


So try with something like this in your screen css (or maybe you'd like a more specific selector...)


.list.list-group{

    overflow:visible;

}


Hope this helps,

Dorine

 

 Hi Dorine!

Tried applying this CSS in my screen and it didn't work. Any other suggestions?

Thanks anyway!

AD wrote:

Polito wrote:

Hello everyone!


I've been having some trouble while trying to position my tooltip as wanted and wondered if any of you could help. I've tried setting a higher z-index or a position:absolute and couldn't make it work.


This is how it looks... "satisfeitos com as entregas" is not the beginning of the sentence, so the tooltip is kind of being "cut" from the top.

Any ideas?

Thank you in advance :)


EDIT: I forgot to tell you that the green box is inside a web block, where it contains the tooltip. The web block itself its inside a list, and that is where the message is being "cut".

 Hi Polito,

Can  you check any float you are applying on container ?. Wrap your web block in container and check

Hope this help

Thanks

AD



 

 

 Hi AD!

How do I check it after wrapping in a container? I did wrap it in a container but I've seen no changes so far.

Any other suggestions? Thanks anyhow!

Don't know if this info is helpful, but with some tests, I've been able to tell that the one limiting the tooltip size is something with the List itself. The problem now is that if I make it bigger, I end up ruining the design I wanted. So what I really need is a way for it just to be over the rest, just like the zindex. 

Polito wrote:

Dorine Boudry wrote:

Hi Polito,

I suspect it is the overflow:hidden of the list that creates problems for you.

In Outsystems UI there's this


.list.list-group{

     overflow:hidden;

}


So try with something like this in your screen css (or maybe you'd like a more specific selector...)


.list.list-group{

    overflow:visible;

}


Hope this helps,

Dorine

 

 Hi Dorine!

Tried applying this CSS in my screen and it didn't work. Any other suggestions?

Thanks anyway!

 Hi Polito,


to help you, what we really need is to take a look at what you are exactly doing.  Can you share your (demo) oml, or share a weblink where we can inspect the webpage in action ?

Now, it just remains a guessing game,

Dorine

 

Hi,

did you check this document?

Cheers

Hey Polito,


Is it possible that you don't have the OutsystemsUIWeb on your environment up to date? The tooltip widget depends on it.


Cheers