Custom tooltips

[mgajowiak]

Following the chart.js documentation to customize tooltips I could use options: tooltip: callbacks, but this option has been commented in code. How can I customise tooltips content?

[jamieoneill]

I've found this, it needs to be written in JavaScript as the custom option not the callback option.

Doc for custom here http://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips. I'll just show how to get started.

Create a new JavaScriptFunction object. Below code is bare minimum to just change the the title of the tooltip to "Test".

JavaScriptFunction function = new JavaScriptFunction("function(tooltipModel)" 
                                        + "{ var tooltipEl = document.getElementById('chartjs-tooltip');"
                    + ""
                    + "if (!tooltipEl) { "
                    + "tooltipEl = document.createElement('div'); "
                    + "tooltipEl.id = 'chartjs-tooltip'; "
                    + "tooltipEl.innerHTML = \"<table></table>\" "
                    + "document.body.appendChild(tooltipEl); }"
                    + ""
                    + ""
                    + "function getBody(bodyItem) {return bodyItem.lines; }"
                    + ""
                    + "var titleLines = tooltipModel.title || [];"
                    + "var bodyLines = tooltipModel.body.map(getBody);"
                    + ""
                    + "titleLines.forEach(function(title) {"
                    + "innerHtml += '<tr><th>test</th></tr>';"
                    + "});"
                    + ""
                    + ""
                    + "}");

Add the JavaScriptFunction to the options and continue to create chart as normal.

LineOptions options = new LineOptions()
                    .setTitle(new Title().setText("ToolTip Testing").setDisplay(true))
            .setTooltips(new Tooltips().setCustom(function));

When rendered should look like this:

  "options" : {
    "title" : {
      "display" : true,
      "text" : "ToolTip Testing"
    },
    "tooltips" : {
      "custom" : function(tooltipModel){ var tooltipEl = document.getElementById('chartjs-tooltip');if (!tooltipEl) { tooltipEl = document.createElement('div'); tooltipEl.id = 'chartjs-tooltip'; tooltipEl.innerHTML = "<table></table>" document.body.appendChild(tooltipEl); }function getBody(bodyItem) {return bodyItem.lines; }var titleLines = tooltipModel.title || [];var bodyLines = tooltipModel.body.map(getBody);titleLines.forEach(function(title) {innerHtml += '<tr><th>test</th></tr>';});}
    }
  }

Reference the documentation for all options. It will still have to be done in a string containing Javascript, someone correct me if i am wrong but i don't see a way of doing it all in Java.

*note: can only be done with one chart on screen at a time due to the getElementById call.

[jochec]

I have implemented this functionality in Tooltip callbacks + update fill #22 pull request

[mdewilde]

@jochec changes are now available in 2.5.0 on Maven Central.