5 <title>Pie Chart with Custom Tooltips</title>
6 <script src="../Chart.js"></script>
7 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
18 background: rgba(0, 0, 0, .7);
22 -webkit-transition: all .1s ease;
23 transition: all .1s ease;
25 -webkit-transform: translate(-50%, 0);
26 transform: translate(-50%, 0);
28 #chartjs-tooltip.below {
29 -webkit-transform: translate(-50%, 0);
30 transform: translate(-50%, 0);
32 #chartjs-tooltip.below:before {
34 border-color: #111 transparent;
35 border-color: rgba(0, 0, 0, .8) transparent;
36 border-width: 0 8px 8px 8px;
43 -webkit-transform: translate(-50%, -100%);
44 transform: translate(-50%, -100%);
46 #chartjs-tooltip.above {
47 -webkit-transform: translate(-50%, -100%);
48 transform: translate(-50%, -100%);
50 #chartjs-tooltip.above:before {
52 border-color: #111 transparent;
53 border-color: rgba(0, 0, 0, .8) transparent;
54 border-width: 8px 8px 0 8px;
62 -webkit-transform: translate(-50%, 0);
63 transform: translate(-50%, 0);
69 <div id="canvas-holder">
70 <canvas id="chart-area1" width="50" height="50" />
72 <div id="canvas-holder">
73 <canvas id="chart-area2" width="300" height="300" />
76 <div id="chartjs-tooltip"></div>
80 Chart.defaults.global.customTooltips = function(tooltip) {
83 var tooltipEl = $('#chartjs-tooltip');
94 tooltipEl.removeClass('above below');
95 tooltipEl.addClass(tooltip.yAlign);
98 tooltipEl.html(tooltip.text);
100 // Find Y Location on page
102 if (tooltip.yAlign == 'above') {
103 top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
105 top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
108 // Display, position, and set styles for font
111 left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
112 top: tooltip.chart.canvas.offsetTop + top + 'px',
113 fontFamily: tooltip.fontFamily,
114 fontSize: tooltip.fontSize,
115 fontStyle: tooltip.fontStyle,
122 highlight: "#FF5A5E",
127 highlight: "#5AD3D1",
132 highlight: "#FFC870",
137 highlight: "#A8B3C5",
142 highlight: "#616774",
146 window.onload = function() {
147 var ctx1 = document.getElementById("chart-area1").getContext("2d");
148 window.myPie = new Chart(ctx1).Pie(pieData);
150 var ctx2 = document.getElementById("chart-area2").getContext("2d");
151 window.myPie = new Chart(ctx2).Pie(pieData);