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
merged 1 commit into from Dec 25, 2014

Conversation

@ku
Copy link
Contributor

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 kaizenplatform:master branch 3 times, most recently from f5abea8 to 7062e0a Dec 17, 2014
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
1 check passed
1 check passed
continuous-integration/travis-ci The Travis CI build passed
Details
@masayuki0812
Copy link
Member

masayuki0812 commented Dec 25, 2014

Looks nice. Thank you very much!!

@aendrew
Copy link
Member

aendrew commented Jan 10, 2015

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

@parisnakitakejser
Copy link

parisnakitakejser commented Dec 20, 2015

Thanks a lot, you save my night! 👍

@stuartm
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?

@vkiss
Copy link

vkiss commented Jun 9, 2016

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

@PeddiMahesh
Copy link

PeddiMahesh commented Dec 12, 2017

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

@opensrcery
Copy link

opensrcery commented Jul 9, 2018

This does not work for bar charts.

@jayantsr83
Copy link

jayantsr83 commented Jul 10, 2018

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

@toolchild
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();
            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
Copy link

JRPendarvis commented Feb 11, 2020

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
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

You can’t perform that action at this time.