如何在div內的popover中設置選項？

Question

我有多個 div，其中放置了可選擇的彈出。 我基本上是想在彈出部分添加某些選項，但彈出窗口似乎太小了。 這是我的代碼

 .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時，上述小提琴的輸出是這樣的：

我正在努力實現這樣的目標，在右上角：

這樣當它被點擊時它應該顯示：

對不起，我的英語不好。 有一些我沒有關注的東西。 所以請幫忙。 問候

Answer 1

Tou 應該為您的 popover、width 和 height 添加樣式，並重新計算左側

Answer 2

按照這個鏈接。 我只更改了彈出框樣式

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