Adding tool-tip to an image rendered using Highcharts Renderer.image() api - image

Question

I wanted to add a tool-tip to an image that is rendered using:
image (String source, Number x, Number y, Number width, Number height) api.
I couldn't figure out a way to do this, I am using org.moxieapps.gwt.highcharts API's to
create high charts in my GWT app.

Answer 1

Use chart.renderer.text and chart.renderer.rect to draw and position your own custom tooltip based on the position of the image.
This is a sample code snippet I used to display a tooltip for an image which is generated using chart.renderer.image -
marker = chart.renderer.image(src, x, y, imageSize, imageSize)
.on('click', function() {`enter code here`
})
.attr({
zIndex: 100
})
.on('mouseover', function() {
//Call back for image mouse hover
//Draw a text relative to Image X and Y
text = chart.renderer.text("Your tooltip Text",X, Y)
.add();
var box = text.getBBox();
//Now draw a box surrounding the tool tip text
textBG = chart.renderer.rect(box.x, box.y,box.width, box.height, 5)
.attr({
fill: '#FFFFEF',
stroke: 'gray',
'stroke-width': 1,
zIndex: 4
})
.add();
})
.on('mouseout', function() {
//Call back for mouse out on the image
//Destroy Both markers text and textBG on mouse out
//Make text and textBG as global functions for access accross functions
text.destroy();
textBG.destroy();
})
.add();
In this way you can create custom tooltip for images.
I used this link for syntax of adding tooltip text and its back ground to the chart.