javascript - Bootstrap 工具提示位置被长文本搞乱了

Question

我正在使用 bootstrap 3，但无法正确显示工具提示。当标题文本稍长时会发生这种情况(尽管它比文档中显示的示例短)。

这是演示问题的codepen，请将鼠标悬停在右下角的圆形菜单项上:https://codepen.io/rivnatmalsa/pen/dVxZRa

当文本有点长时，我得到的是工具提示。

文本较短时的正确行为

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

将此添加到您的 CSS 中。一切都应该按预期工作

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

这里是 codepen .希望这会有所帮助。