Bootstrap工具提示，如何使用帶有對齊的固定？

Question

我正在嘗試實現有關主題的內容，因此將工具提示設置為固定寬度，並根據我的相對父母正確對齊。 我不了解邏輯，如果將min-width設置為100％，則寬度看起來像父div的50％，如果更改它，則會得到兩種不希望有的行為：

1）工具提示超出了父div的范圍（在我的情況下為右側）

2）如果我更改了工具提示類的絕對位置（而不是內部的），則可以獲取所需的信息，但是tooltip-arrow元素不再正確對齊（試圖更改類tooltip-arrow的位置，但是沒有成功，即使在正確的值上具有！important！）

您有什么建議或最佳做法嗎？ 這是我的jsfiddle

  <div class="container">
     <div class="row">
        <div class="col-xs-4">col 1</div>
        <div class="col-xs-3 col-custom">
           <div class="pull-right">col 2</div>
           <!-- data-container="body"  data-placement="top"  -->
           <i class="fa fa-info-circle fa-lg m-t-xl" aria-hidden="true" data-toggle="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></i>
        </div>
        <div class="col-xs-5">col 3</div>
     </div>
  </div>

CSS：

  .col-custom {
     border: 1px solid black;
     position: relative;
  }
  .tooltip-inner {
     min-width: 100%;
     max-width: 70%;
  }
  .fa-info-circle {
     position: absolute;
     right: 5px;
     top: 0px;
  }

Answer 1

只需在CSS中添加即可。 您沒有設置工具提示的寬度和位置。

.tooltip{
  width:100%;
  left:0 !important;
  right:0  !important;
}

並且如果您想要正確的對齊方式，請添加它。

  .tooltip{
     width:100%;
     right:100%  !important;
  }

JS右對齊

$('i[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'right'
});