NgbTooltip position in Angular application

In my Angular 2/4 application, I use ng-bootstrap and its component NgbTooltip.

Assume the following HTML snippet

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'A very long text that does not fit'" 
     placement="top" 
     container="body">
    A very long text that does not fit
</div>

with given custom CSS

.text-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

I am not happy with my implementation yet, maybe someone can help me find an elegant solution to my problem:

Assume the text doesn't fit on the div, then it will be truncated and appended with "..." as expected and the tooltip shows on the top of the center of the div. This is good for this case, but when having very short content, it looks ugly:

<div class="col-sm-8 text-ellipsis" 
     ngbTooltip="'1.jpg'" 
     placement="top" 
     container="body">
    1.jpg
</div>

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 div still the full width).

I thought that I could easily solve this issue by using a span element and set the tooltip on that instead of the div:

<div class="col-sm-8 text-ellipsis">
    <span  
     ngbTooltip="'A very long text that does not fit'" 
     placement="top" 
     container="body">
        A very long text that does not fit
    </span>
</div>

But this workaround raises another issue as seen here:

The problem now is that the span gets truncated, but is in fact wider than the div. The tooltip renders in the middle of the span and not the div.

Any "smooth" idea how to make this nicer? I would appreciate your input a lot.