Plotly tooltip position should be dynamic based on cursor position

Question

I have created a Plotly graph in Angular2 using this example: https://plot.ly/javascript/filled-area-plots/

I want to move the tooltip to right side of the cursor when cursor goes to the extreme left and move the tooltip to the left side when the cursor goes to the extreme right side.

Please Help. Thanks in advance.

Answer 1

I had the same requirement and not found a satisfied solution. So I build my own ToolTipHandler.js in JavaScript for showing a tooltip for all hovered data points. I put it in a full example on jsFiddle for you: https://jsfiddle.net/qcobnbcw/ I have no knowledge about angular so im not sure if it works for u there without changes.

At the begin there are three global variables. showVerticalHoverLine will be used by ToolTipHandler. If it is true, it draw one bobbel for each hovered data point and show a vertical line:

var showVerticalHoverLine = true;
var chartDivId = "myDiv";
var chartDiv = document.getElementById(chartDivId);

From line 5 to line 179 it defines the ToolTipHandler.js. The ToolTipHandler can be used as object and have the two simple methods showToolTip() and hideToolTip(). The toolTip will appear 30px right and down of the current cursor position. For avoiding the toolTip is not viewable if the user if very right or very bottom of the body it haves in line 93 and 101 a check for it. If it would leave the 'screen' it will be moved to the left (or top) of the cursor.

From line 184 to line 205 I build the example plot that your referenced in your question.

From Line 210 to end I create a hover and a unhover function and attach them to the chartDiv. Plotly call it, if it recognizes it. The function shows and hides the correspondingly tooltip.

I hope it is not to much code for you and it helps. Fell free to ask further questions.