0
230
ViewsNgbTooltip 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.
1 answers
Answer question0
This is a general answer, but check into your width versus min-width settings on the div. Also, span is an inline element and does not have block-level properties like width. You either need to use another div or you need to define the span as a display:inline-block in your CSS.
For the outer div, set a min-width where you'd like the ellipsis to start appearing (say at about 150px). Remove the text-ellipsis class from the div and put it on the span. For the span element, add a width of 100% and make it an inline-block (or just use another div)
So, basically, you end up with something like this (I put the min-width:150px inline, but of course this would be better in the style sheet):
<style>
.text-ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
</style>
<div class="col-sm-8" style="min-width: 150px">
<div class="text-ellipsis" ngbTooltip="A very long text that does not fit" placement="top" container="body">
A very long text that does not fit A very long text that does not fit A very long text that does not fitA very long text that does not fit A very long text that does not fit
</div>
</div>