У меня проблемы с размещением всплывающей подсказки в верхней правой части div

Question

Я бездельничаю с всплывающей подсказкой, и я сталкиваюсь с проблемой, которую я не могу понять, что это так.

Моя цель состояла в том, чтобы создать несколько индикаторов прогресса навыка, которые имеют подсказку с соответствующимипроцент в конце бара

но сейчас

это то, что я получил, всплывающая подсказка находится слева от div.Я использую Ахмет Гюр ручку в коде, чтобы тренироваться и привыкнуть к структуре.В этот момент я просто скопировал и вставил его код, и он все еще не работает, поэтому я не знаю, в чем дело.

Я думал, что проблема была 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 + '%');
});