Tooltip positioner question

[j_dimov]

Sometime It is not so easy to click on pie piece when you have large tooltip. I'm using standart tooltip with formatter and its often appears over small slices. I can't(it's too difficult) to click them.
http://jsfiddle.net/Y3EHh/10/
How I can get mouse coordinates in Positioner callback. I want mouse hand never be over the tooltip. How I can do it? Is it possible? I want click to be a priority and tooltip should run away from mouse pointer when I mouse over slices.

Thank you
Yordan

[seba]

You can use http://api.highcharts.com/highcharts#tooltip.positioner or useHTML to define divs as tooltip, and add i.e margin.

Simple example with using useHTML and margins, obviously you can adapt position according to your expectations.
http://jsfiddle.net/Y3EHh/11/

[j_dimov]

The margin just increase the tool tip. It's not my target. I want to move tooltip so that it should running nearby mouse pointer. But the mouse pointer never over the tooltip. Is it possible?

[Fusher]

You can create your own logic for position the tooltip using positioner, this way: http://jsfiddle.net/Y3EHh/13/ Described here: http://api.highcharts.com/highcharts#tooltip.positioner

[eartha5]

I have the same question. I understand the idea of writing a function to position the tooltip via the positioner property. But the problem is you need a mouse event in order to find the coords of the mouse, so that your positioner function knows where to put the tooltip. Is there any way to access the mouseover event that fires the positioner function from within that function, so we can read the position properties from the event object? If the event object was passed in as a fourth parameter, that would work. But just having the column coords as point.plotX,Y means all you can ever do is position off of that coordinate by some offset, or fix the tooltip to a static default in the plot area, right?

[Fusher]

It is possible, but maybe this could be easier:

Code: Select all

jQuery(document).ready(function(){
   $('#container').mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
})

and example using default onmousemove: http://jsfiddle.net/Y3EHh/14/

[eartha5]

Hi, yes, I'm doing something similar to that now. Thanks for the thoughts.

[j_dimov]

Thenk you for your tip. I will try it.

[j_dimov]

I check example http://jsfiddle.net/Y3EHh/14/ but it didn't work properly. The tooltip is always on top-left corner. I tried some options but without success. When I move the tooltip anywhere, refresh method on mouseover is invoked and move the tooltip back. I think that the best will be if we have mouse event arguments in positioner handler/but may be it is not possible because you invoke this method on mouseover not on mousemove/.

Also I saw that you fire position event on mouseover. In this example if the mouse pointer is over the tooltip, point events are blocked. I can't click and mouseover the slices under tooltip's container. It's working fine with StackBar and Trend charts. I can click the point and cursor change its icon to 'hand' there. Why for pie chart is different. It's too difficult to click or show tooltip for small slices.

I attach the example with stackbar:
http://jsfiddle.net/Y3EHh/15/ - Stack bar which I can click serie's slices under tooltip
http://jsfiddle.net/Y3EHh/10/ - I can't click Pie's slices under tooltip, because mouseover and click are blocked.

How I can resolve this issue?

Thanks for your help

[Fusher]

Find that lines:

Code: Select all

 "tooltip": {
            positioner: function(w, h, p) {

                return {
                    x: 0,
                    y: 0
                };
            },

As you can see it is fixed position to top left corner. More about positioner you can find here: http://api.highcharts.com/highcharts#tooltip.positioner
Pie chart is really different from all other charts.

[eartha5]

Try something like this? We just call this and pass the chart in directly after creating one with the new operator.

Code: Select all

        setChartTooltipPositioning = function(chart) {
 
			chart.container.addEventListener('mouseover', function(e) {
				chart.container.addEventListener('mousemove', chartContainerMouseMove);
			} );
			chart.container.addEventListener('mouseout', function(e) {
				chart.container.removeEventListener('mousemove', chartContainerMouseMove);
			} );
				
			chart.options.tooltip.positioner = function(lw,lh,p) {
                                //stuff to set correctedCoords to whatever you want
				return correctedCoords;
	        }
				
			function chartContainerMouseMove(event) {
				var containerCoords = element_position(chart.container);
				var relativeMouseX = event.pageX - containerCoords.x;
				var relativeMouseY = event.pageY - containerCoords.y;
				chart.mouseCoords = { x: relativeMouseX, y: relativeMouseY };
			}

// so...

			chart = new Highcharts.Chart(jQuery.extend(true, {}, xyz.getChartConfig(), options));
			setChartTooltipPositioning(chart);

The above idea will at least move the tooltip where you want when you first mouseover. It won't follow the mouse on every mousemove event, but will put it somewhere else, at least... Particularly I've applied it to the column chart, and line charts.

[j_dimov]

The main problem which I have is that the [mouseover] event doesn't fire on other slices, when have rendered tooltip over them. I'm trying to resolve this issue, because I have got a chart with many small slices and can't click them(also can't change their tooltips because it stop firing event mouseover on another slices). I tried something similar like your code bellow. It's no problem to get the mouse coordinates, but I can't move the tooltip, because when I move it, event 'mouseover' on the same slice fired again and refresh the position to old one (using .positioner method on tooltip). Can you edit my example if you have any resolutions of my problem? I tried all tips bellow without success.

The ideal resolution for me will be if the events dependent to slices fired although tooltip is renederd over them (like trend and bar charts).

Thank you
Yordan

[hfrntt]

Two things comes to my mind:
- You can override getAnchor and getPosition methods in the Tooltip prototype (Highcharts.Tooltip.prototype.getAnchor and Highcharts.Tooltip.prototype.getPosition).
- Or use dataLabels instead of tooltip.

[j_dimov]

The first one - It is very possible to crash something else, because I'm not so familiar how Highcharts component use these both methods.
The second one - it is not possible, because I display large text with different type of information for each slice. Also I have functional requirements(FR) document which expect tooltip (no dataLabels). And other reason is that I don't like how component arrange dataLabels in small charts. This is reported like other issue in the forum.

[torstein.honsi]

The first way is the preferred way if you want to do something that is not directly implemented in Highcharts.

You can override a method like this and still preserve the default functionality:

Code: Select all

Highcharts.wrap(Highcharts.Tooltip.prototype, 'getAnchor', function (proceed, points, mouseEvent) {
   var ret;

   // Insert your custom code before the default

   // Run the default method
   ret = proceed.call(this, points, mouseEvent);

   // Insert your custom code after the default, like modifying ret

   return ret;
});