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
- In Highcharts, how to reverse y-axis under "Bar" chart type?
- How to combine highcharts (heatmap) and table (mapping each table row with heatmap row)?
- Drilldown displayed in coloum instead of pie chart
- Start chart from threshold
- Fixed x-axis in Highcharts Stock (stop auto-scaling)
- spark-highcharts export to file (png or pdf)
- How to extract Min and Max date from Highcharter stock graph?
- Highcharts drilldown on area chart
- Radar Chart: Label outside the chart
- Mouse out event on highcharts
- Button to show all legend items in highcharts
- How to dynamically draw a separator on a pie chart
- How to make Highstock work with two xAxis?
- Position of highcharts map series
- Display space in chart in case of null value present in object in high chart stacked bar chart
- Combine Dates with Homerun Data from JSON
- Determine trend line types available in HighStock charts
- Return Highcharts using Ajax and Python
- Highcharts spline chart not rendering in IE and mozilla
- Step interval of "1" not working for me in Highcharts, why?
- Highcharts / Highstock horizontal plotLine label's vertical alignment?
- Highcharts: when having multiple columns for the same X axis value, how can I get 1 tooltip per column?
- Highchart area chart with date time
- How to overlay two kinds of world maps over each other on Highmaps
- Highcharts tickinterval set to one minute shows only one date
- Highcharts: Bar inside of a stacked bar
- Highcharts event redraw/load with reflow, and Angular
- Mult-level Drill Up
- How do I remove unused xaxis values from Highcharts?
- Resize specific chart