Bootstrap Tooltips, how to use a fixed with with alignment?

Question

I am trying to achieve what on subject, so a tooltip with fixed width, and with right alignment basing on my relative parent. I don't understand the logic, if I set min-width to 100%, the width looks like the 50% of the parent div and if I change it I obtain two undesired behaviours:

1) The tooltip is going outside the parent div (in my case right side)

2) If I change the absolute position of the tooltip class (not the inner one) I can obtain what I want, but the tooltip-arrow element is not correctly aligned anymore (tried to change the position of the class tooltip-arrow but without success, even if with !important on the right value !)

Do you have any hints or a best practice to suggest? Here my 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

Just add this in CSS. You are not setting the tooltips width and positioning.

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

And if you want the right alignment, add this.

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

JS for right alignment

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