Customize different tooltips of bar chart

Question

I'm now trying to plot bar chart by chart.js.
The result as

Figure 1:

and

Figure 2:

.

I know it can use tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> Files" to custmize the tooltips.
But is it possible to show different text in different bar?

For example, show 12:10, 13:20 instead of tooltip 12:00~14:00: 12 Files in Fig. 1 and show 14:25 instead of 12:00~14:00: 12 Files in Fig. 2.

@potatopeelings This is work!! But how to center the tooltip? It will be truncated if the tooltip is too long as [this figure](http://imgur.com/dmPIUQq) — PeterYu, Dec 24 '15 at 00:57

score 0 · Accepted Answer · edited May 23 '17 at 11:52

You can combine the answers from How to modify chartjs tooltip to add customized attribute and How to make tool tip contents display on multiple lines

Script

function Label(short, long) {
  this.short = short;
  this.long = long
}
Label.prototype.toString = function() {
  return this.short;
}


var ctx = $("#myChart").get(0).getContext("2d");

var data = {
    labels: [ 
      new Label("J", "S JAN JAN JAN JAN JAN JAN JAN E"), 
      new Label("F", "S FEB E"), 
      new Label("M", "S MAR E"),
      new Label("A", "S APR APR APR APR APR APR APR E"),
      new Label("M", "S MAY E"),
      new Label("J", "S JUN E"),
      new Label("J", "S JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL E")
    ],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }]
};

    var myLineChart = new Chart(ctx).Bar(data, {
        tooltipTemplate: "<%if (label){%><%=label.long%>: <%}%><%= value %>",
        customTooltips: function (tooltip) {
            var tooltipEl = $('#chartjs-tooltip');

            if (!tooltip) {
                tooltipEl.css({
                    opacity: 0
                });
                return;
            }

            // split out the label and value and make your own tooltip here
            var parts = tooltip.text.split(":");
            var re = new RegExp('\b', 'g');
            var innerHtml = '<span>' + parts[0].trim().replace(re, '<br/>') + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
            tooltipEl.html(innerHtml);

            tooltipEl.css({
                opacity: 1,
                // the minimum amount is half the maximum width of the tooltip that we set in CSS ...
                // ... + the x scale padding so that it's not right at the edge
                left: Math.max(75 + 10, tooltip.chart.canvas.offsetLeft + tooltip.x) + 'px',
                top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
                fontFamily: tooltip.fontFamily,
                fontSize: tooltip.fontSize,
                fontStyle: tooltip.fontStyle,
            });
        }
    });

CSS

 #chartjs-tooltip {
     opacity: 0;
     position: absolute;
     background: rgba(0, 0, 0, .7);
     color: white;
     padding: 3px;
     border-radius: 3px;
     -webkit-transition: all .1s ease;
     transition: all .1s ease;
     pointer-events: none;
     -webkit-transform: translate(-50%, -120%);
     transform: translate(-50%, -120%);
     max-width: 150px;
 }

HTML

<canvas id="myChart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>

Note that I've adjusted for the left side edge. If you don't have enough space on the top or the right, you'll need to do the same for those edges as well (maximum limit for tooltip.x and limit for tooltip.y)

Fiddle - http://jsfiddle.net/69vt0091/

I have tried this code with jquery mobile, but it seems not work. I'll attach the code in following answer. — PeterYu, Dec 25 '15 at 01:45
You might want to update the question or add a new question (better since you'll have more folks looking at it). The question is the central point for the problem (its different from a forum kind of site). Cheers and happy holidays! — potatopeelings, Dec 25 '15 at 04:22
I have created the new question [**Customize and create multiple line of tooltips in bar chart**](http://stackoverflow.com/questions/34460243/customize-and-create-multiple-line-of-tooltips-in-bar-chart). What is the problem that you mean? Could you help to explain it more detail in the new question? Thanks~ (Sorry that I'm new in this area ><) — PeterYu, Dec 25 '15 at 05:30
Oh I meant that StackOverflow has a Question and Answer format i.e. there is a Question (the problem) and the answer(s) (solutions) (see http://stackoverflow.com/tour). Many other sites have a conversation format, like you ask something, someone responds and then you respond to that, etc. — potatopeelings, Dec 25 '15 at 10:04
Hmm...So stupid am I... So, is it possible to work with jquery mobile or how can I do it? — PeterYu, Dec 28 '15 at 10:33

Customize different tooltips of bar chart

1 Answers1

Linked