After spending a considerable amount of time researching how to implement a suitable tooltip for JsGrid, I have come up with the following solution:
headerTemplate: function() {
return $("<div>").text(this.title)
.append('<div class="tooltip"><img height="20" width="20" id="tooltip" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-help-outline-128.png" /><span class="tooltiptext">Tooltip text</span></div>');
However, the issue with this tooltip is that when it contains a long text, it gets cut off by the JsGrid Header due to its overflow-x: hidden and overflow-y: scroll properties.
To address this problem, I tried setting the position of the tooltip to position:absolute, but this caused misplacement when the grid did not fit entirely on the screen.
I discovered that surrounding the element with overflow set in CSS with a <div> having position: relative, allows me to use a nested position: absolute div to override it. However, since the grid is dynamically generated through Javascript, I am contemplating if there is an alternative approach or if I need to modify the JsGrid generation process.
You can view the complete example at: https://jsfiddle.net/SlowFing/1hx84hv7/