jquery - 我无法将工具提示定位在 div 的右上角

Question

我在搞乱引导工具提示，我遇到了一个我无法弄清楚的问题。

我的目标是创建一些技能进度条，它们在栏的末尾有一个带有相应百分比的工具提示

但是现在

是我得到的，工具提示停留在 div 的左侧。我在 codepen 使用Ahmet Gür笔来训练并习惯这种结构。在这一点上，我只是复制粘贴了他的代码，它仍然不起作用，所以我不知道它出了什么问题。

我认为问题出float: right在.tooltip并尝试过right: 0%，但它只是使工具提示从视口中消失。

知道如何解决这个问题或可能的问题是什么？

这就是我得到的：

HTML

            <div class="container col-12 col-md-6">

            <div class="barWrapper">
                <span class="skill-title">Photoshop</span>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                        <span  class="pop-over" data-toggle="tooltip" data-placement="top" title="65%"> </span>
                    </div>
                </div>
            </div> 
            </div>

CSS

.tooltip{
   position:relative;
   float: right;
 }
.tooltip > .tooltip-inner {
   background-color: #eebf3f;
   padding:5px 15px;
   color:rgb(23,44,66);
   font-weight:bold;
   font-size:13px;
 }
.pop-over + .tooltip > .tooltip-arrow {
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid #eebf3f;
}

.progress{
   border-radius:0;
   overflow:visible;
}
  .progress-bar{
  background:rgb(23,44,60) !important;
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
}

JS

$(function () {
  $('[data-toggle="tooltip"]').tooltip({trigger: 'manual'}).tooltip('show');
});


$(".progress-bar").each(function(){
  each_bar_width = $(this).attr('aria-valuenow');
  $(this).width(each_bar_width + '%');
});

标签： jqueryhtmlcsstwitter-bootstraptooltip