I am having trouble getting a tooltip to display over a fixed scrolling header within a jquery datatable. To better illustrate the issue, I have created a jsfiddle:
http://jsfiddle.net/75e4ssgv/4/
Here is the sample HTML code:
<section>
<h2>I am content</h2>
</section>
<section class="content">
<div><span data-tooltip="other text i want to see">Other text</span></div>
<div><span data-tooltip="some text i want to see">Text</span></div>
</section>
The css applied by datatables forces certain styles on the container, making its contents scrollable.
Despite trying different approaches with the css of the tooltip, such as adjusting the z-index and adding position: absolute, the desired results have not been achieved. Adding position: absolute causes the text to be misplaced within the table.
Is there a way to make the tooltip appear outside the container without using position: absolute?