this is done because the hover points in the dom are inside .u-over and should not be clipped at the edges of the plotting area. the cursor is also inside .u-over, but it should be clipped, because hiding it can simply be setting its coordinates to -10,-10. this is currently not possible so, there's extra code that actually applies or removes a .u-off class with display: none:
so, the broader issue is that sometimes we want to put things into .u-over for the benefits of using relative positioning, but sometimes need clipping at the edges (large hover points) and other times not (tooltips / menus):
for this to be possible we a additional div within .u-over that has position: absolute; overflow: hidden; width: 100%; height: 100%. maybe called .u-clipped or .u-inner and a uPlot option that instructs where to put the hover points, and provide a place to put unclipped dom things, like tooltips.
.u-over
is currentlyoverflow: visible
, while.u-under
isoverflow: hidden
.https://github.com/leeoniya/uPlot/blob/c629511d9c2d6dbba5bc799c823b120ac55e722a/src/uPlot.css#L25-L32
this is done because the hover points in the dom are inside
.u-over
and should not be clipped at the edges of the plotting area. the cursor is also inside.u-over
, but it should be clipped, because hiding it can simply be setting its coordinates to-10,-10
. this is currently not possible so, there's extra code that actually applies or removes a.u-off
class withdisplay: none
:https://github.com/leeoniya/uPlot/blob/c629511d9c2d6dbba5bc799c823b120ac55e722a/src/dom.js#L79-L82
so, the broader issue is that sometimes we want to put things into
.u-over
for the benefits of using relative positioning, but sometimes need clipping at the edges (large hover points) and other times not (tooltips / menus):for this to be possible we a additional div within
.u-over
that hasposition: absolute; overflow: hidden; width: 100%; height: 100%
. maybe called.u-clipped
or.u-inner
and a uPlot option that instructs where to put the hover points, and provide a place to put unclipped dom things, like tooltips.