Question

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

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
        };
    }
}

这是问题的一个小问题 http://jsfiddle.net/bteWs/

如果你走得很慢，并注意到开关发生的第一个点，箭头将指向错误的方向。之后它会更正（如我的帖子中所述）。只是在这种情况下寻找解决方案以获得正确的行为。

Answer 1

您始终可以为工具提示启用这两个类，只需在定位器中删除inproper，请参阅：http://jsfiddle.net/bteWs/3/

默认格式化程序：

        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;
        },

删除：

            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');
            }

Answer 2

我有同样的问题。问题是定位器在格式化程序之后开始调用。我修复了你的jsfiddle。这是一个巨大的黑客，但你可以看到如何克服你的问题。

在修复中，我使用了全局。你不需要，但我匆匆砍你的小提琴。我也摆脱了你的一些重复代码。

诀窍是在工具提示开关侧后强制刷新工具提示。

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;
            var refreshTooltip = false;
            var previousAlign = chart.align;

            if ((pointX - boxWidth - distance) < plotLeft) {
                x = pointX + 60;
                chart.align = "left";
            }
            else {
                x = Math.max(plotLeft, pointX - boxWidth - 10); 
                chart.align = "right";

            }
            y = Math.min(plotTop + plotHeight - boxHeight, Math.max(plotTop, pointY - boxHeight + plotTop + boxHeight / 2));

            if (previousAlign != null && chart.align != previousAlign) {
                chart.tooltip.refresh(activePoint);
            }

            return { x: x, y: y };
}

请在此处查看完整的小提琴：

http://jsfiddle.net/anber500/bteWs/1/

重新绘制工具提示定位器回调内的工具提示

2 个答案: