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 Query

More Query from same tag