CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4popper.js
zmechanic
zmechanic

Reputation: 1990

Bootstrap 4 tooltip in small container positioning issue

I'm having issues with Bootstrap 4 tooltip positioning. I have a scrollable container, which is narrow enough for an item only. For an item I want to display a tooltip on the right. Tooltip for an item doesn't fit into container and Bootstrap incorrectly positions as can be seen on the image below and this Fiddle.

enter image description here

If I make container wide enough for tooltip there is no issues.

How can I fix the issue and have my tooltip on the right even if it doesn't fit in container?

Here is HTML:

<div id="container">
  <div id="content">
    <div class="block" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
  </div>    
</div>

And CSS:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');

#container {
    width: 120px;
    height: 400px;
    border: 1px solid red;
    overflow: hidden;
}

#content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background-color: #f0f0f0;
}

.block {
  background-color: #f1f1f1;
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  margin: 10px;
  background-color: #00ff00;
}

Upvotes: 1

Views: 221

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

It because popper.js is used to absolute position the tooltip. You can override this behavior using the data-boundary option on the tooltips...

https://www.codeply.com/go/Ueu4813mhH

<div id="container">
  <div id="content">
    <div class="block" data-toggle="tooltip" data-boundary="window" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-boundary="window" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-boundary="window" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-boundary="window" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
    <div class="block" data-toggle="tooltip" data-boundary="window" data-placement="right" title="Lorem ipsum dolor sit amet, et adhuc delenit quo. Imperdiet theophrastus ius ut, alii sensibus complectitur sit eu.">123</div>
  </div>    
</div>

Upvotes: 2

Related Questions