0

I have a chart that's in a div that's set to overflow-y: scroll. The tooltips spill out of the chart to the right and part of them can't be seen.

Apparently, CSS doesn't allow overflow-y: scroll and overflow-x: visible at the same time, hence the obscuration of the tooltips. I also had the same problem with a calendar but it has a setting that changes the direction that it expands.

Is there a way that I can reposition or offset the tooltips such that they expand to the left?

Here's a pic...

enter image description here

I thought this hack would work but it results in the div containing the charts becoming horizontally scrollable.

https://stackoverflow.com/a/39554003/221683

Ian Warburton
  • 15,170
  • 23
  • 107
  • 189

1 Answers1

0

The tooltip shoud be outside the oveflow box if you want to show wider area of it. You can calculate its position in js on mouseover or any other action - without the code I do not know what are you showing, how, and why it is not working as you describe. "the code works fine" - apparently not, if you asked your question...

<style>
.container { position:relative; }
.tooltip { position:absolute; }
</style>

<div class='container'>
    <div class='tooltip'>Hi mum, this is long as hell tooltip, not overflowed</div>
    <div class='chart'>
    ... chart data
    </div>
</div>
Trueman
  • 274
  • 1
  • 10