Hello,
I have an issue with my tooltips. I want to display them when hovering numbers in brackets. My problem is that I am working with several weblocks and the tooltip gets cut because it goes beyond the block.
Here you can only see the bottom arrow but the rest is not showing.
My calendar is built in three weblocks :
Thank you so much for your replies!
Your solution didn't completely work for me because I already tried what you suggested. But it helped me understanding that it was indeed that overflow: hidden on the list that caused the problem.
To resolve it, I simply did the same with !important and now it is fixed!
.list.list-group { overflow: visible!important; }
Thank you again, it's solved for me :)
Hi,
This indeed happens and the solution usually depends on where you have the tooltip. Have you tried fiddling with its CSS?
This post might help.
Hi, thanks for your answer!
I already tried all the solutions described in this post but unfortunately nothing works for me.
This is how my widget tree looks like. I tried enclosing everything within a container, adding an overflow:visible to the List and a z-index to the Advanced Format but it's still the same...
Heeey,
Can you share some OML or replicate the issue and share?
Kind Regards,
Márcio
I am sorry I am not allowed to share the OML. All I can send are screenshots.
So this is how my weblock looks like:
And this is what displays when I run the application:
(I disabled the position of the tooltip so we could see it better)
Try to remove the overflow on the list
Put this in your theme!
.list-item {
overflow:unset;//or overflow:visible
}
If you want to create an exception just for that block, you can do this
You can put a class on the parent(first container)
And then on the theme, you put this
.parent .list-item{ overflow:visible; }
Note: ".parent" is just a class I gave, you can put for example
.calendar-single day on the first container and then is just
.calendar-single day .list-item{ overflow:visible; }
That way, it's going to be possible to see, I did the test, and works on my side, let's see if it works on yours.
If it doesn't work, I want if possible to see those classes, the CSS of:
Hi Gaëlle,
In addition to the solution by Márcio, I would suggest instead of defining/overriding the pre-defined class, chain the existing Style class with your custom style (prefix with a space) class, something like this..
Style Class Def:
.list.list-group.cust__listGrpStyle { overflow: visible; }
Kind regards,
Benjith Sam
Tha is a nice way to do it because we don't want to start putting !important every time we want to do an exception
You can create a parent class(like @Benjith Sam said) and do the exception when the list is inside of that parent class, like the way I said but in this case for the list.list-group :)
Thank you for your suggestion! Unfortunately, I already tried this one too and I tried it again after seeing your comment but it is not working for me. The only solution that fixes my issue is the !important one so I will keep it for now :)