C3 charts - contents of tooltip clickable

Question

I am making charts using c3.js. I have to make the contents of the tooltip cilckable. Till now, the tooltip is visible only when i hover over the chart. I have some Informat

Answer 1

I know I'm commenting on an old question, but just for reference in case anyone else needs it, I modified 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 seems to be optional. But the 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.

Answer 2

First (if you haven't already done so) override the tooltip position so that it doesn't keep running 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 your click event can be detected.

var originalHideTooltip = chart.internal.hideTooltip
chart.internal.hideTooltip = function () {
    setTimeout(originalHideTooltip, 100)
};

---

Then, you just need to override the pointer-events style (so that the mouse events are not ignored) and then attach the handler as you normally would 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())
    })

Modify the selector as required (like adding the chart wrapper id...)

---

Fiddle - http://jsfiddle.net/5vbeb4k8/