title: Tooltip not working properly in `angular-ui-grid`
body: <p>I am using <code>angular-ui-grid</code> <code>v3.0.0-rc.22-e8fe073</code> and <code>bootstrap</code> tooltip inside a grid with <code>ui.bootstrap</code>.</p>
  
  <p>Please find below tooltip template as below:</p>
  
  <pre><code>var templateWithTooltip = '&lt;div class="ui-grid-cell-contents"&gt;&lt;a tooltip=\'{{COL_FIELD CUSTOM_FILTERS}}\' tooltip-append-to-body="true" tooltip-placement="right" style="text-decoration:none;top:0!important; white-space:pre;max-width:none;"&gt;{{ COL_FIELD CUSTOM_FILTERS }}&lt;/a&gt;&lt;/div&gt;';
  </code></pre>
  
  <p>And using this in grid as <code>cellTemplate: templateWithTooltip</code>. And in css:</p>
  
  <pre><code>.tooltip-inner{
          word-wrap: break-word;
      }
  </code></pre>
  
  <p>The tooltip works fine for all the columns except last column. Please find below screenshot taken in resolution 1680x1050 :</p>
  
  <p><a href="https://i.stack.imgur.com/TohDE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TohDE.png" alt="enter image description here"></a></p>
  
  <p>I tried with `tooltip-placement="auto right" but this makes position even worst for other columns as well. </p>
  
  <p>Tried with this as well:</p>
  
  <pre><code>cellClass: 'cellToolTip'
  </code></pre>
  
  <p>and </p>
  
  <pre><code>.cellToolTip {
      overflow: visible;
  }
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p><strong>Is it possible to call a function to assign the name of position to <code>tooltip-placement</code> attribute ? Like this:</strong></p>
  
  <pre><code>    $scope.fnGetTooltipPosition = function (context, source) {        
              var position = $(source).position();
              /*if (position.left &gt; 1600) {
                  return "left";
              }
              if (position.left &lt; 1200) {
                  return "left";
              }
              if (position.top &lt; 1050){
                  return "left";
              }*/
              return "left";
          }
  
  var templateWithTooltip = '&lt;div class="ui-grid-cell-contents"&gt;&lt;a tooltip=\'{{COL_FIELD CUSTOM_FILTERS}}\' tooltip-append-to-body="true" tooltip-placement={{fnGetTooltipPosition()}} style="text-decoration:none;white-space:pre;max-width:none;"&gt;{{ COL_FIELD CUSTOM_FILTERS }}&lt;/a&gt;&lt;/div&gt;';
  </code></pre>
  
  <p><strong>I tried with above but the tooltip always come at top. If this can be done then I think we can get correct position for tooltip based on the resolution.</strong></p>
  
  <p><strong>Update 2</strong></p>
  
  <p><strong>Is it possible to call a function for each cell to get it's position and apply tooltip position respectively ? How do I call a function for each cell in a grid ?</strong></p>
  
  <p><strong>Is it possible to display tooltip at bottom or left position for last column if the tooltip content does not fit with the screen resolution ?
  How do I display tooltip properly for the last column of a grid ?</strong></p>