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 Query
- Redrawing the tooltip inside of the tooltip positioner callback
- Redrawing the tooltip inside of the tooltip positioner callback
- Highcharts - How to display legend symbol inside the tooltip
- Compare two data points inside the tooltip in a Highcharts combination chart
- How to get the angular component class reference inside an emitted Highcharts selection event callback function?
- Strange character in the Highstock source code
- Highstock chart tooltip activation only when inside the chart
- Highcharts not redrawing when series are updated inside subscribe callback
- 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
- Can color of data label be different inside and outside of the bar in Highchart
- Link inside of a Highcharts tooltip
- Remove Tooltip in Synchronized Charts, When user leaves the chart area
- Highcharts: dynamically change the tooltip formatter?
- How do I add a tooltip to the x-axis labels in highcharts?
- Border Styles for the Highchart tooltip
- (jQuery Highchart) Is there any way to put extra custom data inside Tooltip Box?
- Highcharts: How to make Tooltip position to be visible in the Viewport
- (Highcharts) button inside tooltip can't trigger
- Highcharts add tooltip that has a small arrow pointing toward the series
- Possible to change the height inside the highchart drilldown?
- Highcharts load data with ajax to populate the tooltip
- JavaScript code inside TypeScript file .ts not working
- HighCharts tooltip appearing behind the dialog holding the chart
- Is it possible to set Highcharts to hide tooltip when the mouse pointer is 30px away
- Highcharts column tooltip - always on top + fit the container
- Highcharts stock chart - Technical Indicators - Stock price is missing in the tooltip when selecting the 'All' range
- Highcharts - Using a function to change the tooltip
- Highcharts tooltip in scrollable container scrolls with the content
- Getting the complete XML source out of an XML DOM object
More Query from same tag
- Highchart strange behavior of Range selector text boxes.
- highcharts issues in pie chart with gradient fill
- Scale graph in angular
- Drilldown more than 1 subreport using Highcharts
- Stacked area in Highcharts make my series fading in and fading out
- Highcharts highlight single point on line
- Highcharts - Y axis always visible (even after horizontal scrolling)
- Highcharts - Fix chart height when it has legends
- Highcharts wrap processData on line charts doesn't draw right data points
- Disable marker on certain points on highcharts
- How to implement "zebra striping" in highcharts axes
- using JS event function twice in shiny R to create a dropdown
- Resize specific chart
- Chart's width is impacting to my second x axis labels in Highcharts
- Highcharts - label placement for categorized y-axis
- Add URL to Pie-Donut Highchart
- highcharts, stacked column, switchrowsandcolumns
- Highcharts - shared tooltips for certain serieses
- highchart datalabel one value is missing in label
- HighCharts: Category values are repeated. Tooltip not showing the correct date
- Highcharts set xAxis values starting 12am and ends in 11pm
- plotting irregular time data from CSV with highcharts
- Highcharts Polar Chart: Multiple pane segment colors
- highcharts correct json input
- Highcharts :Rendering only Percentage Bar Using type: 'xrange'
- Highcharts: Change color of Pie Chart section without slice animation
- dynamically generating json from json for highcharts heap map chart using ajax
- Highcharts: Stop one series interacting with the mouse?
- High charts queue chart updates after ajax with multiple charts in firefox
- Highcharts - null values are plotted on stacked area chart, in latest version