Как сделать настройки в popover, который находится внутри div?

Question

У меня есть несколько делений, в которые я поместил выбор для всплывающего окна. Я в основном пытаюсь добавить определенные опции во всплывающем разделе, но всплывающее окно кажется слишком маленьким. Вот мой код

.box {
      top: 33px;
    left: 346px;
    position: relative;
    width: 160px;
    right: auto;
    height: 50px;
    bottom: auto;
}
.four{
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: rgba(217, 83, 79, 0.8);
    color: #fff;
    border-radius: 4px 4px 0 0;
}
.six{
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #009933;
    color: #fff;
    border-radius: 4px 4px 0 0;
}
.five{
      box-sizing: border-box;
    width: 100%;
    height: 20px;
    font-size: 11px;
    line-height: 18px;
    border: 1px solid  #009933;
    border-radius: 0 0 4px 4px;
    text-align: center;
    background-color: #fff;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.popover{
    position: absolute;
    top:0;
    right:0;
    left: 80% !important;
    
}

.popover .arrow{
    display:none;
   
    
}

<div class="box" id="box1">
  <div class="four">
  adam
    <i  class="glyphicon glyphicon-info-sign"  title="Help" data-toggle="popover" data-placement="right" width="100%"  data-content="1453453"></i>
  </div>
  <div class="five">
    
  </div>
</div>
<div class="box" id="box2">
   <div class="six">
     <i  class="glyphicon glyphicon-info-sign"  title="Help" data-toggle="popover" data-placement="right" width="100%"  data-content="1453453"></i>
  </div>
  <div class="five">
    
  </div>
</div>

здесь https://jsfiddle.net/zohaibrehman/4z6uydge/23/ показывает полный результат, но я не знаю, почему javascript здесь не работает.

Вывод вышеупомянутой скрипки таков, когда я нажимаю i по кругу:

То, что я пытаюсь достичь, в правом углу:

Такое, что при нажатии это должно показывать это:

Извините за мой плохой английский sh. Есть то, на чем я не фокусируюсь. Поэтому, пожалуйста, помогите. Привет

Answer 1

Подписаться по этой ссылке . Я только изменил стиль поповера

.popover{
  position: absolute;
  top: 16px !important;
  right: 0;
  left: auto !important;
}

Answer 2

Вы должны добавить стили к вашему поповеру, ширине и высоте, и затем c слева