score:2
Accepted answer
I don't see anything in the API that allows you to "turn on" the tooltip for Renderer
created objects. In the link you provided, they create points close to the Renderer
objects, and then the mouseover
of the object passes that point.
You can follow that pattern (mapping points to the Renderer
objects):
function some(renderer) {
renderer.rect(10, 10, 100, 100, 1).attr({
fill: 'red'
}).add().on('mouseover', function () {
var chart = Highcharts.charts[0];
var point = chart.series[0].points[0];
chart.tooltip.refresh(point);
})
.on('mouseout', function () {
var chart = Highcharts.charts[0];
chart.tooltip.hide();
});
}
See fiddle here.
Or you could manipulate the tooltip even more directly:
function some(renderer) {
renderer.rect(10, 10, 100, 100, 1).attr({
fill: 'red'
}).add().on('mousemove', function(e) {
Highcharts.charts[0].tooltip.move(e.pageX,e.pageY); // follow the mouse
}).on('mouseout', function(e) {
Highcharts.charts[0].tooltip.hide(); // off the rect, hide it
}).on('mouseover', function(e) {
var tooltip = Highcharts.charts[0].tooltip;
clearTimeout(tooltip.hideTimer); // if it was in the process of hiding, cancel
tooltip.isHidden = false; // mark it as shown
tooltip.label.attr({
text: 'Hi Mom!' // add a label
});
tooltip.label.attr('opacity', 1).show(); // show it
});
}
See updated fiddle here.
Source: stackoverflow.com
Related Query
- Highcharts: options setting for customized renderer
- Highcharts -- exporting, setting dataLabel options
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Tooltip Options not working for Highcharts Treemap
- Highcharts display label for pie chart using html table as data source
- Simple, Open source PHP wrapper for Highcharts library
- Create Default options for multiple highcharts
- Highcharts - Exporting options for print to match export to png
- HTML table as data source for highstock charts using highcharts
- Including source for Alchemy js breaks Highcharts js
- Using a flask variable as data source for highcharts
- Highcharts Interactivity between plots - looking for code improvements
- Setting min and max for chart in Highcharts library error
- Error: Data source must be a URL for refresh | console error | javascript | Highcharts
- Use Node.js as data source for highcharts
- Highcharts histogram drilldown: set options for drilldown + first and last column cut-off
- How to have common options for multiple y-axes in Highcharts
- HighCharts - Set default Axis options for my extension
- Setting the top value for a highcharts chart
- Setting rounded corners on an image using Highcharts Renderer
- HighCharts turn animation false for line chart
- set different colors for each column in highcharts
- How to make highcharts default to 0 for missing data
- What format does the highcharts js library accept for dates?
- Changing data dynamically for a series in Highcharts
- Add additional data to a Highcharts series for use in formatters
- Highcharts text labels for y-axis
- Displaying percentage inside pie item for highcharts
- Display tooltip for invisible series in Highcharts
- Highcharts percentage of total for simple bar chart
More Query from same tag
- Wrong data display when i set multiple series type in highstock chart
- Highcharts Showing negative values on tooltip
- Highcharts: backgroundColour "layers"?
- How to show data point in Box Plot highcharts
- Chart not being displayed using DotNet.HighCharts and WebForms
- Highcharts Custom tooltips for multiple series
- Have Highcharts tooltip disappear on click
- Javascript - How do I get the first element in an array?
- How to bind dynamic data in highcharts Tooltip
- convert highcharts to image for Persian language
- Pass data to Javascript from ProMotion WebScreen
- How to select multiple points or markers programmatically in Highcharts?
- HighCharts - Permanent tooltip on solid gauge
- Highchart's Pie Chart Opacity Changes on Hover
- highcharts not displaying line when last point is before current x Axis minimum and next point is after current X Axis maximum
- Highcharts using value not an array Ajax
- HighCharts/Maps: How to display values lower than a certain value appear different from the rest of the graphic?
- Highchart datetime x-axis : display end of month date instead of first day of month
- How to get selected date from highstock?
- Hide 0 values in Stacked Column Chart in Highcharts
- Highcharts: some columns are missing when a bar chart changes to a column chart
- Highcharts loses it's dateRange values after refresh on IE<=9 and Chrome
- How to change the color of marker-points dynamically based on y-position
- How can I pass values from Highcharts event callbacks (click, mouseOver, mouseOut) back to React component member function?
- get plotBand on Highcharts to span first column
- Highcharts crash after adding tickpositioner
- Verify if Pie in Highcharts Pie charts is selected or deselected
- How to efficiently remove all series from highchart/highstock and then add many more
- Highcharts Y Axis Tick Marks not setting
- Locate a dot with the same xpath in a highchart