search

angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!
http://angular-ui.github.io/bootstrap/
MIT License
14.29k stars 6.73k forks source link

Tooltip to appear only on truncated text #6377

Closed seminolas closed 7 years ago

seminolas commented 7 years ago

Bug description:

See plunker - when the width of the html pane is reduced to force ellipsis truncation, the tooltip doesn't appear on first hover, but does on second.

I realise this is may not be a bug, but my clunky use of angular. If so, I'd appreciate any clues for resolving this. Many thanks!

Link to minimally-working plunker that reproduces the issue:

https://plnkr.co/edit/aqZq0ySiHhssy9l9ggTB?p=preview

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.8

UIBS: 1.3.0

Bootstrap: 3.3.6

adgoncal commented 7 years ago

Try this: https://plnkr.co/edit/py8QQb?p=preview

seminolas commented 7 years ago

That works, thanks! Unfortunately, I'm currently stuck at an older version -it didn't work quite so well, so I went the manual route for now. Nevertheless, I think/hope someone will find this useful :-)

RosanaRufer commented 7 years ago

Hi, I used a similar approach to solve this but I am facing the issue of having the tooltip placement way too far from the text when the text is much longer than its container.

I could reproduce this using a fork of @adgoncal 's Plunkr

tooltip-issue

Did you use a work around for this or am I missing something?

adgoncal commented 7 years ago

@Totemika You have min-width: 150px on .truncate Try changing that to a smaller value.

RosanaRufer commented 7 years ago

Thanks!