c3_chart_internal_fn.initTooltip = function () { var $$ = this, config = $$.config, i; $$.tooltip = $$.selectChart .style("position", "relative") .append("div") .style("position", "absolute") .style("pointer-events", "none") .style("z-index", "10") .style("display", "none"); // Show tooltip if needed if (config[__tooltip_init_show]) { if ($$.isTimeSeries() && isString(config[__tooltip_init_x])) { config[__tooltip_init_x] = $$.parseDate(config[__tooltip_init_x]); for (i = 0; i < $$.data.targets[0].values.length; i++) { if (($$.data.targets[0].values[i].x - config[__tooltip_init_x]) === 0) { break; } } config[__tooltip_init_x] = i; } $$.tooltip.html(config[__tooltip_contents].call($$, $$.data.targets.map(function (d) { return $$.addName(d.values[config[__tooltip_init_x]]); }), $$.getXAxisTickFormat(), $$.getYFormat($$.hasArcType()), $$.color)); $$.tooltip.style("top", config[__tooltip_init_position].top) .style("left", config[__tooltip_init_position].left) .style("display", "block"); } }; c3_chart_internal_fn.getTooltipContent = function (d, 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, name, bgcolor; for (i = 0; i < d.length; i++) { if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; } if (! text) { title = titleFormat ? titleFormat(d[i].x) : d[i].x; text = "" + (title || title === 0 ? "" : ""); } name = nameFormat(d[i].name); value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index); bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id); text += ""; text += ""; text += ""; text += ""; } return text + "
" + title + "
" + name + "" + value + "
"; }; c3_chart_internal_fn.showTooltip = function (selectedData, mouse) { var $$ = this, config = $$.config; var tWidth, tHeight, svgLeft, tooltipLeft, tooltipRight, tooltipTop, chartRight; var forArc = $$.hasArcType(), dataToShow = selectedData.filter(function (d) { return d && isValue(d.value); }); if (dataToShow.length === 0 || !config[__tooltip_show]) { return; } $$.tooltip.html(config[__tooltip_contents].call($$, selectedData, $$.getXAxisTickFormat(), $$.getYFormat(forArc), $$.color)).style("display", "block"); // Get tooltip dimensions tWidth = $$.tooltip.property('offsetWidth'); tHeight = $$.tooltip.property('offsetHeight'); // Determin tooltip position if (forArc) { tooltipLeft = ($$.width / 2) + mouse[0]; tooltipTop = ($$.height / 2) + mouse[1] + 20; } else { if (config[__axis_rotated]) { svgLeft = $$.getSvgLeft(); tooltipLeft = svgLeft + mouse[0] + 100; tooltipRight = tooltipLeft + tWidth; chartRight = $$.getCurrentWidth() - $$.getCurrentPaddingRight(); tooltipTop = $$.x(dataToShow[0].x) + 20; } else { svgLeft = $$.getSvgLeft(); tooltipLeft = svgLeft + $$.getCurrentPaddingLeft() + $$.x(dataToShow[0].x) + 20; tooltipRight = tooltipLeft + tWidth; chartRight = svgLeft + $$.getCurrentWidth() - $$.getCurrentPaddingRight(); tooltipTop = mouse[1] + 15; } if (tooltipRight > chartRight) { tooltipLeft -= tooltipRight - chartRight; } if (tooltipTop + tHeight > $$.getCurrentHeight() && tooltipTop > tHeight + 30) { tooltipTop -= tHeight + 30; } } // Set tooltip $$.tooltip .style("top", tooltipTop + "px") .style("left", tooltipLeft + 'px'); }; c3_chart_internal_fn.hideTooltip = function () { this.tooltip.style("display", "none"); };