Bootstrap 工具提示位置与长文本混淆

Question

I am using bootstrap 3 and am having trouble displaying the tooltips correctly. This happens when the title text is slightly longer (though it is shorter than the examples shown in the docs).

Here is the codepen demonstrating the problem, please hover on the circular menu item in the bottom right: https://codepen.io/rivnatmalsa/pen/dVxZRa

What I get when the text is a bit long, tooltip comes over the element.

Correct behavior when text is short

HTML:

    <div class="nd4 nds" data-toggle="tooltip" data-placement="left" title="Build Parallel Index">
      <p class="letter"><i class="fa fa-road"></i></p>
    </div>

    <div class="nd3 nds" data-toggle="tooltip" data-placement="left" title="Update Content Index">
            <p class="letter"><i class="fa fa-wrench"></i></p>
    </div>

    <div class="nd1 nds" data-toggle="tooltip" data-placement="left" title="Clear Cache">
      <p class="letter"><i class="fa fa-trash-o"></i></p>
    </div>

    <div id="floating-button" data-toggle="tooltip" data-placement="left" title="Background Tasks">
      <p class="open-background-tasks">+</p>
    </div>
</div>

CSS:

#floating-button{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: green;
    position: fixed;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    box-shadow: 0px 2px 5px #666;
    z-index: 30;
}

.open-background-tasks{
    color: white;
    position: absolute;
    top: 0;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 55px;
    font-size: 45px;
    font-family: 'Roboto';
    font-weight: 800;
    animation: plus-out 0.3s;
}

#background-tasks{
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 30px;
    right: 30px;
    z-index: 50;
}

#background-tasks:hover{
    height: 400px;
    width: 90px;
    padding: 30px;
}

#background-tasks:hover .open-background-tasks{
    animation: plus-in 0.15s linear;
    animation-fill-mode: forwards;
}

.nds{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: fixed;
    z-index: 300;
    transform:  scale(0);
    cursor: pointer;
}

.nd1{
    background: #d3a411;
    right: 40px;
    bottom: 120px;
    animation-delay: 0.2s;
    animation: bounce-out-nds 0.3s linear;
    animation-fill-mode:  forwards;
}

.nd3{
    background: #3c80f6;
    right: 40px;
    bottom: 180px;
    animation-delay: 0.15s;
    animation: bounce-out-nds 0.15s linear;
    animation-fill-mode:  forwards;
}

.nd4{
    background: #ba68c8;
    right: 40px;
    bottom: 240px;
    animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;
    animation-fill-mode:  forwards;
}

.nd5{
    background: crimson;
    background-size: 100%;
    right: 40px;
    bottom: 300px;
    animation-delay: 0.08s;
    animation: bounce-out-nds 0.1s linear;
    animation-fill-mode:  forwards;
}

@keyframes bounce-nds{
   from {opacity: 0;}
   to {opacity: 1; transform: scale(1);}
}

@keyframes bounce-out-nds{
    from {opacity: 1; transform: scale(1);}
    to {opacity: 0; transform: scale(0);}
}

#background-tasks:hover .nds{
  animation: bounce-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

#background-tasks:hover .nd3{
  animation-delay: 0.08s;
}

#background-tasks:hover .nd4{
  animation-delay: 0.15s;
}

#background-tasks:hover .nd5{
  animation-delay: 0.2s;
}

.letter{
    font-size: 23px;
    font-family: 'Roboto';
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    line-height: 40px;
  }

@keyframes plus-in{
    from {border-radius: 50%;background-color: green; transform: rotateZ(0deg);}
    to {border-radius: 50%;background-color: #db4437; transform: rotateZ(45deg);}
}

@keyframes plus-out{
    from {border-radius: 50%;background-color: #db4437; transform: rotateZ(45deg);}
    to {border-radius: 50%;background-color: green; transform: rotateZ(0deg);}
}

JS:

$(document).ready(function(){
  $('body').tooltip({
    selector: '[data-toggle="tooltip"]'
  })
});

Answer 1

Add this to your css. And everything should work as expected

div.tooltip-inner{
  max-width: none;
  white-space: nowrap;
}

Here is codepen . Hope this helps.