score:2

Accepted answer

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

score:0

I had the same issue. The problem is that positioner is begin called after the formatter. I made a fix to your jsfiddle. It's a huge hack but you can see how you can overcome your problem.

In the fix, I made use of a global. You don't need to but I hacked your fiddle in a hurry. I also got rid of some of your duplicate code.

The trick is to force a refresh on the tooltip after the tooltip switch sides.

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

See the complete fiddle here:

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


Related Articles