custon jQuery tooltip for header cell


we are trying to display jQuery tooltip for header cell. we use bootstrap styles in our application. we are able to get the tooltip, but it gets cut after the grid boundary. i have attached the screen shot of the tooltip. i tried setting the container also, but no luck.

here is the piece of code i’m using.

mygrid.setHeader('<div style="cursor: default" rel="headerTooltip" title="The Name">Name</div>');
 $('#grid').tooltip({selector: '[rel=headerTooltip]', container: 'body'});

Please, try to remove the following command from your global.js:


i searched our files, and we are not using this command. kindly advice on how shall we proceed.

Please, provide with a complete demo, where the issue can be reproduced locally.
Here you can find a tutorial: … leted_demo


PFA the demo application. try running in Firefox.
Complete (623 KB)

in your demo tooltip is attached to the div inside the header’s cell.
Please, try to change your jquery code to attach tooltip to the dhtmlxgrid container or to a html body.