Dynamic ellipsis for a text with tooltip.

[csabattilas]

Hello,

I needed to achieve dynamic ellipsis for a text like when u resize the windows the text resizes itself automatically.
There is a solution without javascript using a display: table container with table-layout: fixed as a wrapper around the overflown text. In order to make this work the text itself also needs to be in block element on which the tooltip will be applied (other than block is not working for ellipsis). The problem is that the block display will move the right side tooltip away from the text itself when container the tooltip applied on is wider than the text. I cannot put other positioning for the tooltip as the text is in the first column of a table and there is no space at left side. Nor bottom/top works nicely.

I managed to sort this by calculating the width of the text using another helper container. I changed the tooltip source code and now I have my own version, I always have to merge with new upcoming angular bootstrap versions.

I'm not sure how frequent this problem is for developers or if there is another workaround, but maybe it would be a nice idea to extend the tooltip with this functionality in order to support dynamically "ellipsed" text.

Also what is the way to become a contributor of this project?

Thank you,
Csaba

[goto100]

+1

[ouzhenkun]

+1

[csabattilas]

Hello,

I have new idea of how to solve this and I managed to have it work. The idea is that we would need a new placement value called "right min-parent" if this would be the placement value then the tooltip would choose the minimum between the width of the element on which the tooltip is used and its parent.
So in this case the we would do something like

<div class="ellipsis">
<span tooltip="Tooltip text" placement="right min-parent">My one line content with tooltip</span>
</div>

I think this is an elegant solution and it does not need too much changes, it's only a double check but I think worth it.
I'm not sure what to do to merge this solution into the production version if people agree with it.
Please advice on this,

Thank you,
csaba

[rvanbaalen]

You can customize your tooltip by simply overwriting the template and do whatever you want with it. We're not planning on implementing custom features like this since we want to keep both the library and it's API clean and basic. The aim of the project is to achieve Twitter Bootstrap JS functionality in vanilla Angular without jQuery dependency. So if they have the ellipsis feature implemented, we'll probably follow.

Regarding contributing to the project -- take a deep dive in the issues and send us some PR's! All help is appreciated.

[csabattilas]

I think overriding the tooltip template would not help on the problem. It's about the possition of the tooltip. The tooltip is put at the right of the element, but if the element is hidden (as the case of the this kind of ellipsis implementation) it will still put it to its right which might not be what someone wants. I will do a plunkr to demonstrate. thanks

[rvanbaalen]

It sounds like you're using the wrong tool for the job and I still can't quite understand what you're trying to achieve if you don't provide a demo plunkr that at least shows some of the functionality you intend to implement.

[rvanbaalen]

Closing due to inactivity. Please re-open if you can provide a plunkr.

[csabattilas]

Hello,

Finally I made time to explain the issue (a bit complicated, but not very). I made a plunkr: http://plnkr.co/edit/bVheJu5Osm7aEQhWEopE?p=preview with the explanation in it and the practical part. Use the buttons (bigger, smaller) to change the wrapper.
Drop any questions or ideas how it's better to solve it. I'm not a very advanced ui-bootstrap user but I had my challenges with it.

Csaba

[csabattilas]

Please re-open the issue if you find it suitable for it. The plunkr is http://plnkr.co/edit/bVheJu5Osm7aEQhWEopE?p=preview http://plnkr.co/edit/bVheJu5Osm7aEQhWEopE?p=preview

thanks,
csaba