directive works strange in bootstrap grid

Im AngularJS newbie:).

I have a simple directive driving some popovers for icon. It works ok in one place but in other is working improperly (it blinks and popup is moved down and it covers the icon).

HTML template:

<div class="row">
  <div class="col-lg-6">
    <h3 class="box-title">EMPLOYEE DETAILS</h3>
    <div class="form-group field-userinfo-username">
      <label class="control-label text-padding" for="userinfoUsername">Username</label>

      <div class="row">
        <div class="col-xs-11">
          <input type="text" id="uuserinfoUsername" class="form-control" name="userinfoUsername" readonly ng-model="model.full_name" />
        </div>
        <div class="col-xs-1">
          <form-field-information></form-field-information>
          <!-- it's not working properly-->
        </div>
      </div>
      <form-field-information></form-field-information>
      <!-- it's working properly-->
      ...

Directive code:

'use strict';

angular.module('app')
  .directive('formFieldInformation', function() {
    return {
      restrict: 'E',
      template: '<i class="glyphicon glyphicon-question-sign"  style="font-size: 16px"  uib-popover="This field describes ..." popover-title="Field information:" popover-trigger="mouseenter"></i>'
        //replace: true
    };
  });

Video added here