Introduce tooltip.position callback function

[ku]

Added a callback function to control the position of the tooltip programmatically to tooltip configuration.
circle element is given if grouped option is false and region element is given if it's true.

This callback function allows to show tooltip on the top of the data points like this.

with following configuration.

        tooltip: {
          grouped: false,
          position: function (data, width, height, element) {
            var chartOffsetX = document.querySelector("#chart").getBoundingClientRect().left;
            var graphOffsetX = document.querySelector("#chart g.c3-axis-y").getBoundingClientRect().right;
            var tooltipWidth = document.getElementById('tooltip').parentNode.clientWidth;
            var x = (parseInt(element.getAttribute('cx')) ) + graphOffsetX - chartOffsetX - Math.floor(tooltipWidth/2);
            var y = element.getAttribute('cy');
            var y = y - height - 14;
            return {top: y, left: x}
          },
          contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
            d = Math.floor(d[0].value)
            return '<div id="tooltip" class="module-triangle-bottom">' + d + ' wows</div>'
          }
        }

[masayuki0812]

Looks nice. Thank you very much!!

[aendra-rininsland]

Oh rad! Good to know it can do this now. The documentation definitely needs to be updated to include this!

[parisnakitakejser]

Thanks a lot, you save my night! 👍

[stuartm]

Is it possible to modify top while leaving left unchanged, or vice-versa, or is it always necessary to recalculate both?

[vkiss]

There's just one problem:
When values match on the graphic, it only show one data.

[PeddiMahesh]

If we are using xs in data how to get 'cx' and 'cy' values of point.

[opensrcken]

This does not work for bar charts.

[jayantsr83]

How this code will work with donut chart? Any Help?

[toolchild]

Thanks for the code.

This one works for me for line and bar charts.
It places the tooltip slightly above the top of the bar, or the point of the line
It requires jQuery

 position: function (data, width, height, element) {
            var classInGraph = data[0].id.replace(/[ ]/g, '-'); // c3 uses values to turn them into classes and replaces all ' ' with '-'
            var $diagram = $('.svg-diagram:not(.hidden)'); // this is a div container around the actual svg element, i tis positioned relative and will be the parent the absolute positioned tooltip orientates itseld on
            var $lineOrBarContainer = base.isBarDiagramStyle ? $diagram.find('.c3-chart-bars') : $diagram.find('.c3-chart-lines'); // this is the container for either bars or lines
            var $hoveredElementContainer = base.isBarDiagramStyle ? $lineOrBarContainer.find('[class*="c3-shapes-' + classInGraph + '"]') : $lineOrBarContainer.find('[class*= "c3-circles-' + classInGraph + '"]'); // this is the container where the hovered Element is in
            var hoveredElement = $hoveredElementContainer.children().get(data[0].index); // the actual hovered element
            var position = $(hoveredElement).position();
            console.debug($(hoveredElement).position());
            position.top = position.top - $(element).position().top - height;   // element's postion top is  the offset y of your chart (more or less)

            if (position.left + width > parseInt($(element).attr('width'))) { // avoid overflow on the right
              position.left = Math.max(position.left - width, 0); // avoid overflow on the left after correction
            }
            return position;
          },

Maybe it is helpful to someone
Please correct me if I'm saying something wrong. I haven't fully understood how c3 does what it does.

[JRPendarvis]

Can the function be an external file?