Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce tooltip.position callback function #833

merged 1 commit into from Dec 25, 2014


Copy link

@ku ku commented Dec 17, 2014

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>'

to control the position of the tooltip programmatically
@ku ku force-pushed the master branch 3 times, most recently from f5abea8 to 7062e0a Compare December 17, 2014 15:41
masayuki0812 added a commit that referenced this pull request Dec 25, 2014
Introduce tooltip.position callback function
@masayuki0812 masayuki0812 merged commit f6e6281 into c3js:master Dec 25, 2014
Copy link

Looks nice. Thank you very much!!

Copy link

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

Copy link

Thanks a lot, you save my night! 👍

Copy link

stuartm commented Apr 6, 2016

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

Copy link

vkiss commented Jun 9, 2016

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

Copy link

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

Copy link

This does not work for bar charts.

Copy link

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

Copy link

toolchild commented Jan 11, 2019

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();
   = - $(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.

Copy link

Can the function be an external file?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
R-needs-docs Request for changes: The PR needs documentation
None yet

Successfully merging this pull request may close these issues.

None yet