C3 Graphics - Tooltip Contents
I make diagrams using c3.js . I have to make the content of the tooltip cilckable. Until now, the tooltip is visible only when you hover the cursor over the chart. I have information that should be displayed when I click a link in a tooltip. I couldn't find any help from c3 documentation . Below is a piece of code that I am working on.
$scope.timelineConfig.tooltip.contents = function (data, defaultTitleFormat, defaultValueFormat, color) {
var $$ = this, config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) { return name; },
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value;
text = "<div id='tooltip' class='d3-tip'>";
title = dates[data[0].index];
text += "<span class='info'><b><u>Date</u></b></span><br>";
text += "<span class='info'>"+ title +"</span><br>";
text += "<span class='info'><b><u>Features</u> : </b> " + features[data[0].index] + "</span><br>";
text += "<span class='info'><b><u>Enhancements</u> : </b> " + defects[data[0].index] + "</span><br>";
text += "</div>";
return text;
};
I need to make content ( <span><b><u>Features...</u></b></span>
) clickable.
source to share
First (if you haven't already) override the position of the tooltip so that it doesn't run away when you try to click it.
tooltip: {
position: function () {
var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
position.top = 0;
return position;
},
Then you need to override the hideTooltip function so that it doesn't close before you can detect the click event.
var originalHideTooltip = chart.internal.hideTooltip
chart.internal.hideTooltip = function () {
setTimeout(originalHideTooltip, 100)
};
Then you just need to override the style pointer-events
(so mouse events are not ignored) and then attach the handler as usual in jQuery
$(".c3-tooltip-container")
.css("pointer-events", "auto")
.on('click', '.info:eq(2)', function () {
// add click functionality here. you could pass in additional data using the span attributes
alert($(this).text())
})
Change the selector as needed (for example, add the chart wrapper id ...)
Fiddle - http://jsfiddle.net/5vbeb4k8/
source to share
I know I am commenting on an old question, but just for reference, in case anyone needs this, I changed the above answer to work for my code.
In my CSS:
.c3-tooltip-container {
pointer-events: auto !important;
}
In JS:
c3.chart.internal.fn.hideTooltip = function () {
setTimeout(c3.chart.internal.fn.hideTooltip, 100);
};
The position code appears to be optional. But a fixed top is probably more user friendly.
tooltip: {
position: function () {
var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
position.top = 0;
return position;
},
Thanks @potatopeelings for getting me started with this - it was a huge help.
source to share