features tooltip

Tooltip Feature

• This section introduces about feature of tooltip.

---

To align the tooltip

Using tooltip.align option, you can set base position.
Align option of bar chart set 'center bottom'. But other charts set 'center top'. The default option of the bar chart is set to 'center bottom', the rest of the chart is set 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 by processing forwarded the information received should be returned in html.
tooltip.template options can be set to function, and should 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();
});