Display tooltip over fixed table header

Question

I am trying to get a tooltip to overlay within a jquery datatable with a fixed scrolling header. I've reproduced the issue in a jsfiddle here:

http://jsfiddle.net/75e4ssgv/4/

The example html:

<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>

Basically datatables is forcing the following css on to the container:

section.content {
    position: relative;
    background-color: white;
    width: 90%; 
    overflow: auto;
    border: 1px solid gray;
    height: 125px;
}

This makes sense for making the content that appears within it scroll-able.

However, I ripped a really simple css tooltip from another site

[data-tooltip] {
    position: relative;
    z-index: 10;
    cursor: help;
    color: orangered;
    text-decoration: none;
}
[data-tooltip]:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 20px solid orangered;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    left: 0;
    bottom: 90%;
    display: none;
}

[data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    right: -50%;
    background: orangered;
    padding: 5px 15px;
    color: black;
    border-radius: 10px;
    white-space: nowrap;
    display: none;
}

[data-tooltip]:hover:after {
    bottom: 100%;
}

[data-tooltip]:hover:before {
    bottom: 70%;
}

[data-tooltip]:hover:after, [data-tooltip]:hover:before {
    display:block;
}

But no amount of tinkering with the css for it has so far yielded any satisfying results. Adding a higher z-index doesn't do anything, and if I add position: absolute to the [data-tooltip] declaration then it moves the text to weird places inside the table.

So, is there any way to get this tooltip to appear outside of the container without adding position: absolute to it?

Answer 1

add this to the container

overflow: visible;

check this fiddle