[Solved]-Render Highchart with dynamic ID in jQuery tooltip-Highcharts

this is a perfect example to learn to check the documentation carefully and also to debug.

first, you don't need the element id to render highcharts to an element. as documentation says, you can do this:

element.highcharts({/* options */});

and second, have you tried to see if your widget variable actually contains something? if you do a console.log(widget), you will see that the console outputs undefined, and if you do console.log($(this).data("ui-tooltip")) you see that the console logs the document, not the widget element. this is a perfect point to check the documentation and see that the open event receives a second ui argument with the actual tooltip element, being it a jquery element so no need for $(ui.tooltip) but directly access ui.tooltip.

now with all this info you can do this:

open: function(event, ui) {
  ui.tooltip.highcharts({

which comes into this: https://jsfiddle.net/yx27xf7h/5/

important: you need to destroy the highchart when the widget closes or you will end with a memory leak (insert dramatic ♪dun dun duuun♫ music here).

edit: if you want to use a container element, is better to avoid adding ids as ids must be unique in the entire webpage so you must find a way to create a unique id each time and that's adding extra code when you can avoid it. the less code for the same task, the better.

when working with containers that are created and destroyed on the fly is better to work with references and ways to gather them as references inside their parent containers, for example doing .class or using data attributes, like this: https://jsfiddle.net/yx27xf7h/6/