Edit datatip position in p:chart

Question

I'm using PrimeFaces 6.0 and I want to show tooltip on my bar chart. I tried datatipeditor like this example and it worked fine. The problem is, I might use long text for the tooltip and the most left bar won't show the full text like this.

I tried to move the position with this code.

function toolTip(str, seriesIndex, pointIndex, plot){
     var val = plot.data[seriesIndex][pointIndex];
     return "<div style='position:relative; left:80px; bottom:15px;'>1aaaaaaaaaaaaaaaaaaaa: " + 
        (pointIndex +1) + "<br/>2bbbbbbbbbbbbbbbbbb: " + val + "</div>";
}

The text moved as the i designed, but the box still there like this.

I was thinking to use extender, but i'm lost at the documentation page about which attribute to use and how to pass data from bean as tooltip's text.

Any idea how to move the both the box and text to the position I designed with datatipeditor?

Answer 1

Inside bean:

CartesianChartModel barModel = new BarChartModel();
barModel.setExtender("myExtender");

Then in my js i use tooltipContentEditor from highlighter, here's the code:

function myExtender(){
     this.cfg.highlighter = {
          tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) {
             var val = plot.data[seriesIndex][pointIndex];
             return "this value is: " + val + "<br/>this is a looooooooooooong text";
          },
     show: true, 
     useAxesFormatters: false,
     tooltipLocation: 'n'
     };
}

Here's the result.