title: NgbTooltip position in Angular application
body: <p>In my <code>Angular</code> 2/4 application, I use <code>ng-bootstrap</code> and its component <code>NgbTooltip</code>.</p>
  
  <p>Assume the following <code>HTML</code> snippet</p>
  
  <pre><code>&lt;div class="col-sm-8 text-ellipsis" 
       ngbTooltip="'A very long text that does not fit'" 
       placement="top" 
       container="body"&gt;
      A very long text that does not fit
  &lt;/div&gt;
  </code></pre>
  
  <p>with given custom <code>CSS</code></p>
  
  <pre><code>.text-ellipsis {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
  }
  </code></pre>
  
  <p><strong>I am not happy with my implementation yet, maybe someone can help me find an elegant solution to my problem:</strong></p>
  
  <p>Assume the text doesn't fit on the <code>div</code>, then it will be truncated and appended with "..." as expected and the tooltip shows on the top of the center of the <code>div</code>. This is good for this case, but when having very short content, it looks ugly:</p>
  
  <pre><code>&lt;div class="col-sm-8 text-ellipsis" 
       ngbTooltip="'1.jpg'" 
       placement="top" 
       container="body"&gt;
      1.jpg
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ZVL0C.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ZVL0C.jpg" alt="enter image description here"></a></p>
  
  <p>Now the tooltip still shows in the top center of the div, but way on the right of the text (because it is so short but the <code>div</code> still the full width).</p>
  
  <p>I thought that I could easily solve this issue by using a <code>span</code> element and set the tooltip on that instead of the <code>div</code>:</p>
  
  <pre><code>&lt;div class="col-sm-8 text-ellipsis"&gt;
      &lt;span  
       ngbTooltip="'A very long text that does not fit'" 
       placement="top" 
       container="body"&gt;
          A very long text that does not fit
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this workaround raises another issue as seen here:</p>
  
  <p><a href="https://i.stack.imgur.com/6ilpx.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/6ilpx.jpg" alt="enter image description here"></a></p>
  
  <p>The problem now is that the span gets truncated, but is in fact wider than the <code>div</code>. The tooltip renders in the middle of the <code>span</code> and not the <code>div</code>.</p>
  
  <p>Any "smooth" idea how to make this nicer? I would appreciate your input a lot.</p>