In the world of bootstap 4.x, a tooltip finds itself in a bit of a pickle when nestled within a parent element sporting an overflow property. Whether it's overflow: auto; or overflow: scroll;, the poor tooltip just can't seem to find its place. Take a peek at the snippet below to witness the tooltip encroaching on the button's territory.
So, how does one go about preventing this tooltip-button overlap situation? I require its presence in a scrollable container and would much prefer to let the internal logic handle its placement.
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})#wrapper{
margin-top: 100px;
width: 100vw;
overflow: hidden;
border: 1px solid red;
overflow: auto;
}
#scrollable{
width: 2000px;
background: pink;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d6d726d6d786f33776e5d2c332c2b332c">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div id="wrapper">
<div id="scrollable">
<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip with some text in it maybe a lot of text" data-container="body">
Tooltip btn
</button>
</div>
</div>