Log in to AnswerLog in to Follow
2020-04-01 19-09-37
Polito
675Views
10Comments
Solved
Problem with Tooltip
Question

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".

0
0
14 Jul 2020
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

See solution in context
0
0
14 Jul 2020

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!

0
0
14 Jul 2020

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

 

0
0
15 Jul 2020

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/ )


0
0
14 Jul 2020

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.



0
0
14 Jul 2020

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



 

0
0
14 Jul 2020

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!

0
0
14 Jul 2020
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

0
0
14 Jul 2020

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!

0
0
14 Jul 2020

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

 

0
0
15 Jul 2020

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. 

0
0
14 Jul 2020

Hi,

did you check this document?

Cheers

0
0
15 Jul 2020

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

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