重新绘制工具提示定位器回调内的工具提示 [英] Redrawing the tooltip inside of the tooltip positioner callback

问题描述

我正在使用我目前使用工具提示格式化程序功能来控制工具提示的外观，包括添加一些自定义CSS以在面向鼠标的工具提示框侧面创建箭头。我还使用定位器回调来确定工具提示的位置，但是当它从鼠标的一侧改变到另一侧时，我正在更新格式化程序回调以切换箭头所在的工具提示的一侧（请参阅代码如下）。一切工作正常，除了导致工具提示切换鼠标两侧的第一个点。它显然在工具提示定位器函数之前调用了一个工具提示的格式化程序函数（出于可能很明显的原因）。但是，它会阻止我在更改边时正确绘制工具提示。我真正需要在定位器回调中做的事情是更新格式化函数，然后重新绘制工具提示。这是可能的吗？

  positioner：function（boxWidth，boxHeight，point）{
 //设置变量
 var chart = this.chart; 
 var plotLeft = chart.plotLeft; 
 var plotTop = chart.plotTop; 
 var plotWidth = chart.plotWidth; 
 var plotHeight = chart.plotHeight; 
 var distance = 40; 
 var pointX = point.plotX; 
 var pointY = point.plotY; 
 
 //确定是否需要将工具提示从左侧翻转到
 //在右侧
之后if（（pointX  -  boxWidth  -  distance）< plotLeft ）{
x = pointX +距离; 
 chart.tooltip.options.formatter = function（）{
 //更新TOOLTIP FORMATTER HERE 
}; 
 
 
 
 
 $ b $ p 
 $ b这是一个js小提琴问题示例
  http://jsfiddle.net/bteWs/  
 
 
 
如果你慢慢走，并注意开关发生的第一点，箭头将指向错误的方向。之后它纠正（如我的文章所述）。在这种情况下，只需寻找解决方案以获得正确的行为即可。
解决方案
您始终可以为tooltip启用这两个类，只需在定位器中删除不正确的，请参阅： http://jsfiddle.net/bteWs/3/  < 
 
 
默认格式化程序： 
 
 
  formatter：function（）{
 var s ='< div id =custom-tooltipclass =tooltip-left tooltip-right>'; 
 var chart = null; 
 s + =< div style ='padding：5px; color：white'>一些工具提示< / div>< / div>; 
 return s; 
}，
  
并删除：
 
 （（pointX  -  boxWidth  -  distance）x = pointX + 60; 
  if 
 $（＃custom-tooltip）。removeClass（'tooltip-right'）; 
} 
 else {
 x = Math.max（plotLeft，pointX  -  boxWidth  -  10）; 
 $（＃custom-tooltip）。removeClass（'tooltip-left'）; 
} 
  
 
I'm using the I'm currently using the tooltip formatter function to control the look of the tooltip, including adding some custom css to create an arrow on the side of the tooltip box facing the mouse. I am also using the positioner callback to not only determine the placement of the tooltip, but when it changes from one side of the mouse to the other I'm updating the formatter callback to switch the side of the tooltip the arrow lies on (see code below). Everything works fine, except for the very first point which causes the tooltip to switch sides of the mouse. Its clear that a tooltip's "formatter" function is called before the tooltips "positioner" function ( for reasons that are probably obvious ). However, it prevents me from correctly drawing the tooltip when it changes sides. What I really need to be able to do in the positioner callback is to update the formatter function, and then redraw the tooltip. Is that possible?
positioner: function (boxWidth, boxHeight, point) {
    // Set up the variables
    var chart = this.chart;
    var plotLeft = chart.plotLeft;
    var plotTop = chart.plotTop;
    var plotWidth = chart.plotWidth;
    var plotHeight = chart.plotHeight;
    var distance = 40;
    var pointX = point.plotX;
    var pointY = point.plotY;

    // Determine if we need to flip the tooltip from following on the left to
    // following on the right
    if ((pointX - boxWidth - distance) < plotLeft) {
        x = pointX + distance;
        chart.tooltip.options.formatter = function () {
            // UPATE THE TOOLTIP FORMATTER HERE
        };
    }
}
Here is a js fiddle example of the issue
http://jsfiddle.net/bteWs/


If you go slowly, and notice the very first point where the switch happens the arrow will be point the wrong direction. After that it corrects ( as described in my post ). Just looking for a solution to get the correct behavior in this case.
解决方案
You can always have enabled both classes for tooltip, and just remove inproper in positioner, see: http://jsfiddle.net/bteWs/3/

Default formatter: 
        formatter: function () {
            var s = '<div id="custom-tooltip" class="tooltip-left tooltip-right">';
            var chart = null;
            s += "<div style='padding:5px;color:white'>Some Tooltip</div></div>";
            return s;
        },
And removing:
            if ((pointX - boxWidth - distance) < plotLeft) {
                x = pointX + 60;
                $("#custom-tooltip").removeClass('tooltip-right');
            }
            else {
                x = Math.max(plotLeft, pointX - boxWidth - 10); 
                $("#custom-tooltip").removeClass('tooltip-left');
            }


                        
这篇关于重新绘制工具提示定位器回调内的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！