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'
});