How to display a tooltip outside of a weblock without having it cut?
Application Type
Reactive
Service Studio Version
11.11.14 (Build 47936)

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 :

  • one with the calendar, displaying columns for the 6 days
  • one with all week names and dates
  • and one with the time slots

I want my tooltip to be shown on top of every green rectangles, when hovering the number in brackets. It has to be on top (anyway putting it on the bottom doesn't work either because it has a greater width than my column). I am looking for a way to fix this for hours now and I am kind of desperate about this. Can someone help me with that one?

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: 

  • panel
  • panel-heading
  • panel-heading-text

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

Kind Regards,

Márcio

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

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