Add hysteresis to tooltip position

When moving the vertical cursor on the graphs, the little “info box” stays to the left of the cursor, until there is no more room for it, then moves to the right of the cursor. Good!

Unfortunately, as soon as the cursor is then moved to the right, the info box jumps back over to the left.

If one moving the cursor around that point, the info box jumps left and right.

Enhancement: Add hysteresis to the left/right decision, so that the box does not jump back over to the left side of the cursor, until there is no more room for it on the right side of the graph.

Created as an idea in the issue tracker. Seems reasonable, just low priority. :slight_smile:

Took your idea with one tweak. The tooltip now always attempts to move behind the direction of the cursor so you can always see where you’re going. Should go live this Friday.

Actually, that appears to result in even more box jumping from one side to the other. That’s why I prefer the “hysteresis” option I proposed, where the box doesn’t jump unless it has to (at the ends of the graph).

The idea was that if I’m moving my cursor to the left and the tooltip is on the left, I won’t be able to see on the chart where I’m moving towards…especially if you’re trying to find a certain spot.

I tried it both the way you suggested and this way and liked this better. See what you think when it goes live and if it turns out it sucks I’ll reconsider. :slight_smile:

Check out what happens with my 3-day Sensor Detail graph. As I move the cursor from one end to the other, the tooltip swaps left & right as is crosses certain portions of the graph which reflect “Smart Recovery”. This is because the words “Smart Recovery” changes the width of the tooltip !!!

I still like my hysteresis option.

I’ll take a look and see.

I can’t duplicate that. If you notice it could you upload a gif? I generally just use https://www.screentogif.com/

If it’s really eating at you, here’s a bookmarklet that you can click with beestat open that will give you the functionality you desire:

javascript:(function()%7Bbeestat.component.chart.prototype.get_options_tooltip_positioner_x_%20%3D%20function(tooltip_width%2C%20tooltip_height%2C%20point)%20%7Bconst%20plot_width%20%3D%20this.chart_.plotWidth%3Bconst%20fits_on_left%20%3D%20(point.plotX%20-%20tooltip_width)%20%3E%200%3Bconst%20fits_on_right%20%3D%20(point.plotX%20%2B%20tooltip_width)%20%3C%20plot_width%3Bif%20(this.prefer_left_%20%3D%3D%3D%20undefined)%20%7Bif%20(fits_on_left%20%3D%3D%3D%20true)%20%7Bthis.prefer_left_%20%3D%20true%3B%7D%20else%20%7Bthis.prefer_left_%20%3D%20false%3B%7D%7Dif%20(this.prefer_left_%20%3D%3D%3D%20true%20%26%26%20fits_on_left%20%3D%3D%3D%20false)%20%7Bthis.prefer_left_%20%3D%20false%3B%7Dif%20(this.prefer_left_%20%3D%3D%3D%20false%20%26%26%20fits_on_right%20%3D%3D%3D%20false)%20%7Bthis.prefer_left_%20%3D%20true%3B%7Dlet%20x%3Bif%20(fits_on_left%20%3D%3D%3D%20false%20%26%26%20fits_on_right%20%3D%3D%3D%20false)%20%7Bx%20%3D%20this.chart_.plotLeft%3B%7D%20else%20%7Bif%20(this.prefer_left_%20%3D%3D%3D%20true)%20%7Bif%20(fits_on_left%20%3D%3D%3D%20true)%20%7Bx%20%3D%20point.plotX%20-%20tooltip_width%20%2B%20this.chart_.plotLeft%3B%7D%20else%20%7Bx%20%3D%20point.plotX%20%2B%20this.chart_.plotLeft%3B%7D%7D%20else%20%7Bif%20(fits_on_right%20%3D%3D%3D%20true)%20%7Bx%20%3D%20point.plotX%20%2B%20this.chart_.plotLeft%3B%7D%20else%20%7Bx%20%3D%20point.plotX%20-%20tooltip_width%20%2B%20this.chart_.plotLeft%3B%7D%7D%7Dreturn%20x%3B%7D%7D)()

You may find this update useful:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.