CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapbootstrap-4tooltip
J.T. Houtenbos
J.T. Houtenbos

Reputation: 956

Bootstrap 4.x tooltip not placed correctly when placed in a container that can overflow

In bootstap 4.x a tooltip does not get placed correctly if one of the parent elements has an overflow property set. In the code example below I use overflow: auto;, but overflow: scroll; also does not work.

Try running the code snippet below and you will see the tooltip overlap the button element.

How do I prevent the tooltip from overlapping the button element? I need to use it in a scrollable container and rather leave the placement to the internal logic.

$(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/[email protected]/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">
    &nbsp;&nbsp;&nbsp;
    <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>

Upvotes: 1

Views: 1034

Answers (1)

Tommy
Tommy

Reputation: 2453

The solution is to set the boundary attribute, whose default is 'scrollParent' to 'window' and everything works as expected. In the usage section, you will find another example.

$(function () {
  $('[data-toggle="tooltip"]').tooltip({ boundary: 'window' });
})
#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/[email protected]/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">
    &nbsp;&nbsp;&nbsp;
    <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>

Good luck!

Upvotes: 2

Related Questions