features tooltip

Tooltip Feature

• This section introduces about feature of tooltip.

---

To align the tooltip

Using tooltip.align option, you can set base position.
The default option of the bar chart is set to 'center bottom', the rest of the charts are to 'center top'.

Example

//...
var options = {
    tooltip: {
        align: 'center top'
    }
};
tui.chart.barChart(container, data, options);

---

Tooltip positioning

Using tooltip.position option, you can set position of tooltip.

Example

//...
var options = {
    tooltip: {
        position: {
            left: 10,
            top: -10
        }
    }
};
tui.chart.barChart(container, data, options);

---

Using group tooltip

Using tooltip.grouped option, you can use group tooltip.

Example

//...
var options = {
    tooltip: {
        grouped: true
    }
};
tui.chart.lineChart(container, data, options);

• Group Tooltip Sample

---

Setting template of tooltip

Using tooltip.template option, you can change template of tooltip.
This option can be set to function, and must return an HTML.

Setting template of basic tooltip

The basic tooltip template receives the category and item({value: String, legend: String}) information.

Example

//...
var options = {
    tooltip: {
        template: function(category, item) {
            var head = '<div>' + category + '</div>',
                body = '<div>' + item.value + ':' + item.legend + '</div>';
            return haed + body;
        }
    }
};
tui.chart.lineChart(container, data, options);

Setting template of group tooltip

The group tooltip template receives the category and items(Array.<{value: String, legend: String}>) information.

Example

//...
var options = {
    tooltip: {
        grouped: true,
        template: function(category, items) {
            var head = '<div>' + category + '</div>',
                body = tui.util.map(items, function(item) {
                    return '<div>' + item.value + ':' + item.legend + '</div>'
                }),join('');
            return haed + body;
        }
    }
};
tui.chart.lineChart(container, data, options);

---

Dynamically change the position of the tooltip

Using some user event(.beforeShowTooltip, .afterShowTooltip) and some method(.setTooltipPosition, .resetTooltipPosition), you can dynamically change the position of the tooltip.

Example

//...
var chart = tui.chart.barChart(data);

chart.on('beforeShowTooltip', function(info) {
    if (info.legendIndex === 0) {
        chart.setTooltipPosition({
            left: 20,
            top: -10
        });
    }
});

chart.on('afterShowTooltip', function(info) {
    chart.resetTooltipPosition();
});