title: UI Bootstrap tooltip in a table moves everything on the right
body: <p>I have few problems by using the UI Bootstrap.
  I want to use the tooltips. But when I put the tooltip on my TD element. And then I hover it the tooltip shows but, all the things in the same row on the right of the hovered cell  moves more on the right.</p>
  
  <pre><code>    &lt;table class="table"&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th ng-repeat="jr in Jours"&gt;{{jr.jour}}&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr ng-repeat="horaire in triPlan(planning)"&gt;
  
                  &lt;td&gt;{{heurePlanning[horaire.id[0]]}}&lt;/td&gt;
                  &lt;td  class="abraca" ng-click="selectHoraire(horaire)" 
                  ng-repeat="rdv in horaire.rdvs" 
                  tooltip-popup-delay='1000' 
                  tooltip-placement="top" 
                  uib-tooltip="{{rdv.nom+' a l\'âge :  '+rdv.age+' et vient pour : '+rdv.text}}"&gt;{{rdv.nom}}&lt;/td&gt;
              &lt;/div&gt;
          &lt;/tr&gt;
  
      &lt;/table&gt;
  </code></pre>
  
  <p>I tried to put this :  <code>data-container="body"</code> but it doesn't work.
  I tried to make a tooltip-class, and in the css put a <code>z-index</code> and/or <code>position: absolute</code>.
  But nothing works.
  I want that the tooltip don't make the table move on the right..
  Does someone already had this problem and found a solution ?</p>