Jqplot - How to dinamically change the tooltipLocation according to the point position on the grid?

Question

Scenario:

The code below in jsfidle shows an image and a text for some points.

Problem:

The problem is that I didn't find a way to dinamically change the tooltip position and to some points the image appears outside the grid.

    $(document).ready(function () {
        var url= "http://cameraserraverde.com.br/img/"
        var line1 = [['01', 650, ""], ['02', 600, url+"img_fev.jpg"], ['04', 330, url+"imagem_abr.jpg"], ['06', 280, ""], ['08', 230, url+"imagem_ago.jpg"], ['10', 320, url+"imagem_out.jpg"],['11', 600, url+"imagem_nov.jpg"], ['12', 630, ""]];    
        var plot2 = $.jqplot('test', [line1], {
            seriesDefaults: {
                 rendererOptions: {
                     smooth: true
                 }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions:{formatString: "%b"},
                    tickInterval: '1 month'
                }
            },
            series: [{ lineWidth: 2,
            }],        
            highlighter: { 
                show: true,
                useAxesFormatters: false,
                tooltipContentEditor: tooltipContentEditor,
            },        
         });

        function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
          div = "<div>";
          if (plot.data[seriesIndex][pointIndex][2] != ""){
             div+= "<img src='" + plot.data[seriesIndex][pointIndex][2] + "''/>";
          }
          div+= "<figcaption style='text-align: center; background:#D0D0D0'>" + plot.data[seriesIndex][pointIndex][1] + "m</figcaption></div>"
          return div;
        }
});

The question is:

How can I define the tooltipLocation opposite to the point position, for example, if the point is on the grid's quadrant "ne", define the tooltipLocation as "sw"?

Answer 1

Looking for a solution I found this answer that allowed me to find a way. I didn't find a way to change the tooltipLocation, but by changing the layout of the div, I have the desired positioning.

That answer shows, among other things, how to know the x, y coordinates of the point and this allows you to find out in which part of the grid the point and the tooltip are in.

I included a css and changed the tooltipContentEditor function to identify the X and Y coordinates and create an id for the divso that the appropriate style is applied. The code looks like this:

CSS:

#tooltipdivnw {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
#tooltipdivsw {
  position: absolute;
  top: 12px;
  right: 0px;
}
#tooltipdivne {
  position: absolute;
  bottom: 0px;
  left: 8px;
}
#tooltipdivse {
  position: absolute;
  top: 12px;
  left: 12px;
}

function tooltipContentEditor:

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    var div = "<div"; 
    // get X, Y of point in grid
    var data = plot.series[seriesIndex].data;
    var x = plot.axes.xaxis.series_u2p(data[pointIndex][0]);
    var y = plot.axes.yaxis.series_u2p(data[pointIndex][1]);

    // Point on the right or left portion of the grid?
    var loc = ( x > ( plot.grid._plotDimensions.width / 2) );

    // In top or bottom portion?      
    loc =  (loc << 1 ) | ( y > ( plot.grid._plotDimensions.height / 2) );

    switch (loc) {                                                          
        case 0 : div+= " id='tooltipdivse'>";  // point in top-left, div in 'se'
        break;
        case 1 : div+= " id='tooltipdivne'>";  // point in bottom-left, div in 'ne'
        break;
        case 2 : div+= " id='tooltipdivsw'>";  // point in top-right, div in 'sw'
        break;
        case 3 : div+= " id='tooltipdivnw'>";  // point in bottom-right, div in 'nw'
        break;
    }
    // if have an image, add
    if (plot.data[seriesIndex][pointIndex][2] != ""){
        div+= "<img src='" + plot.data[seriesIndex][pointIndex][2] + "''/>";
    }
    div+= "<figcaption style='text-align: center; background:#D0D0D0'>" + 
    plot.data[seriesIndex][pointIndex][1] + "m</figcaption></div>"
    return div;
}

In this jsfidle you can see the before and here the after.