Search code examples
javascriptjqueryhtmlhighchartsgwt-highcharts

Make a text box appear on dragging point in highchart or an editable tooltip

I have implemented a drag-drop highchart. I want to play around the tooltip. I have added a textbox input field in the tooltip, the textbox appears, but I cannot write anything in the box. Here is a fiddle for my work .....

http://jsfiddle.net/rahul172/7rSmT/1/

tooltip: {
    shared: false,
    useHTML: true,
    //headerFormat: '<small>{point.key}</small><table>',
    pointFormat: '<input type="text">',

   // footerFormat: '</table>'
   // yDecimals: 2
},

I want to put the text to get feedback from chart.

Solution

  • You can disable highcharts tooltip, preare your own div (positioned absolute and hidden). Then on mouse over event (on the point) show your custom div.

    http://api.highcharts.com/highstock#plotOptions.series.point.events.mouseOver

    EDIT: jsfiddle.net/7rSmT/5