score:2
You can always have enabled both classes for tooltip, and just remove inproper in positioner, see: http://jsfiddle.net/bteWs/3/
Default formatter:
formatter: function () {
var s = '<div id="custom-tooltip" class="tooltip-left tooltip-right">';
var chart = null;
s += "<div style='padding:5px;color:white'>Some Tooltip</div></div>";
return s;
},
And removing:
if ((pointX - boxWidth - distance) < plotLeft) {
x = pointX + 60;
$("#custom-tooltip").removeClass('tooltip-right');
}
else {
x = Math.max(plotLeft, pointX - boxWidth - 10);
$("#custom-tooltip").removeClass('tooltip-left');
}
score:0
I had the same issue. The problem is that positioner is begin called after the formatter. I made a fix to your jsfiddle. It's a huge hack but you can see how you can overcome your problem.
In the fix, I made use of a global. You don't need to but I hacked your fiddle in a hurry. I also got rid of some of your duplicate code.
The trick is to force a refresh on the tooltip after the tooltip switch sides.
positioner: function (boxWidth, boxHeight, point) {
// Set up the variables
var chart = this.chart;
var plotLeft = chart.plotLeft;
var plotTop = chart.plotTop;
var plotWidth = chart.plotWidth;
var plotHeight = chart.plotHeight;
var distance = 40;
var pointX = point.plotX;
var pointY = point.plotY;
var refreshTooltip = false;
var previousAlign = chart.align;
if ((pointX - boxWidth - distance) < plotLeft) {
x = pointX + 60;
chart.align = "left";
}
else {
x = Math.max(plotLeft, pointX - boxWidth - 10);
chart.align = "right";
}
y = Math.min(plotTop + plotHeight - boxHeight, Math.max(plotTop, pointY - boxHeight + plotTop + boxHeight / 2));
if (previousAlign != null && chart.align != previousAlign) {
chart.tooltip.refresh(activePoint);
}
return { x: x, y: y };
}
See the complete fiddle here:
Source: stackoverflow.com
Related Articles
- Redrawing the tooltip inside of the tooltip positioner callback
- Redrawing the tooltip inside of the tooltip positioner callback
- Highcharts not redrawing when series are updated inside subscribe callback
- Highcharts - How to display legend symbol inside the tooltip
- Link inside of a Highcharts tooltip
- (jQuery Highchart) Is there any way to put extra custom data inside Tooltip Box?
- (Highcharts) button inside tooltip can't trigger
- JavaScript code inside TypeScript file .ts not working
- Compare two data points inside the tooltip in a Highcharts combination chart
- How to edit tooltip in Highcharts C# code
- how to use highcharts tooltip formatter in python code
- Highcharts custom tooltip positioner
- how to add onclick event handler inside highcharts tooltip
- How to get the angular component class reference inside an emitted Highcharts selection event callback function?
- Strange character in the Highstock source code
- highcharts positioner tooltip - general javascript
- Highstock - insert HTML link inside flag tooltip
- Highstock chart tooltip activation only when inside the chart
- How To Show Tooltip In Sparkline Chart From Code
- Shared tooltip positioner point.plotY is always 0 in Highcharts Stacked columns
- Use django variable (array of elements from sqlite3 database) inside javascript embedded code
- Position a Pie Chart inside a Highcharts Stockchart Tooltip
- Disable highcharts tooltip on certain lines, leave it enabled on others?
- How to use the tooltip formatter and still display chart color (like it does by default)?
- Customize tooltip and format the number to 2 decimal places of highcharts
- Highcharts tooltip overflow is hidden
- customize highcharts tooltip to show datetime
- highcharts pass multiple values to tooltip
- How to get multiple series data in tooltip highcharts?
- Disable tooltip on certain points in Highcharts
- Highcharts stacked Funnel chart with horizontal stacking
- Add Extra info like Data attribute or id in heat map highcharts jquery
- Highchart - always show crosshair
- how to use Highcharts on Ionic?
- Solid Gauge: Prevent y-axis label from overlapping gauge
- Solve highmaps-highcharts conflict when creating map, column and radar charts
- HighChart not displaying 'table' in reactjs
- Highcharts point click event returns "hover" state instead of "select" state
- Highchart draggable point - watch changes from component
- datepicker - Highcharts Gauge Json
- Getting Highcharts to render in IE 7 & 8
- javascript highchart photo slide
- Highchart not showing 0 data correctly for pie chart
- Issue with tooltip on Highcharts with multiple series added dynamically
- How to connect/sync xAxis crosshairs between multiple HighStocks charts
- Is there a way to have two colorAxis in highcharts heatmap?
- Highcharts : synchronized charts, It's possible export download image all in one?
- Highchart changing crosshair color depending on value of y-axis
- Can't disable animation when using Highcharts in polar mode
- Highcharts - change default opacity for series, without using RGBA?