我在将工具提示放置在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 + '%');
});