Prevent Bootstrap .table-responsive style from cropping a tooltip

I am having some problem with Bootstrap’s table-responsive style.

I have tried some code here https://codepen.io/arindamx01/pen/gJOqxK to make the full tooltip visible. I have tried without .table-responsive class. Without .table-responsive class it works well: I can see the tooltip by hovering on time. But when I add .table-responsive I can’t see the total tooltip. The tooltip appears cropped at the bottom, and a long scroll bar appears on the right side of the table.

Expected display:

Answer

Change following css to relative to absolute

.tooltipItem_dist {
    position: absolute;
}

https://codepen.io/kashmiriguide/pen/gJOyjW