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 bug 0.14.3 #4999

Closed frfancha closed 8 years ago

frfancha commented 8 years ago

jsfiddle: https://jsfiddle.net/xr19xmdq/4/ When the item on which the tooltip must be set is small and at the right of the page, the tooltip blinks on the item itself, preventing interaction (you can no more easily click on the item e.g.) In the jsfiddle showing the problem the item (word Hi) if extremely small to make the problem clear, in the reality we have the problem also with "normal" items. We have tried with and without append to body true, it doesn't help. With ui-bootstrap 0.12, the problem doesn't occur.

icfantv commented 8 years ago

@frfancha, maintaining a popular OSS project requires a lot of work by many people. Please be respectful of our time by searching both existing open and closed issues before entering new ones. This issue has been discussed on multiple occasions and has been rectified in master with the addition of the *-placement attribute for tooltips and popovers.

Here's a new plunker with the build from master showing how to properly do this.

frfancha commented 8 years ago

@icfantv Sorry for the feeling of lack of respect, it was not at all the intention. I really appreciate the project and the time you put into it. I also help the angularjs team (when possible and at a very small scale) by answering some small questions on git hub when it is not really a bug and I know the answer, just to preserve the time of active developers. Regarding this problem, I perfectly knew that tooltip-position=left is a by-pass, but as the button can be in a dynamic list and then sometimes on the left of the window and sometimes on the right, I don't see it as a solution. Especially from the fact that in 0.12 the default position top is working without problem of flashing or overlapping, we only have the problem since our recent upgrade to 0.14.3

icfantv commented 8 years ago

@frfancha we've overhauled the positioning completely in master - it's not the same as in 0.14.3. Also, with that overhaul, the ability to auto position was added.

Please try with a build from master before we proceed with anything else.

frfancha commented 8 years ago

@icfantv I've downloaded the zipped master, unzip, npm install, grunt, take file from dist. Then I 've removed (to test) all existing tooltip-position on a "complex" page in our application, setting the default to "auto top" by $uibTooltipProvider.

==> It works great! Congrats! All tested tooltips were perfectly auto-positionned.

Note: -With postion top (not auto top) the flashing problem remains, but as auto top works perfectly it doesn't matter. -We don't use ngAnimate (for our business application used on Citrix with slow rendering it doesn't make sense to animate). With 0.14.3 we just don't include or require ngAnimate and it works (without animation of course). But with the downloaded master, I couldn't run the application without including ngAnimate (otherwise Unknown provider: $animateCssProvider <- $animateCss <- $uibModalStack <- $uibModal). Do you plan to require ngAnimate to work or will it stay an option?

icfantv commented 8 years ago

@frfancha, sweet! Glad to hear it. The kudos to go to @RobJacobs who busted his ass for several weeks on that.

Regarding ngAnimate - at first glance, that sounds like a bug as it's not supposed to be required. @wesleycho or @Foxandxss, can you confirm, please?

cwkwong commented 8 years ago

Hi everyone, sorry if this is the wrong place to ask this question. I'm trying to build master to get the latest improvements for tooltip positioning just like @frfancha, so I performed the same steps:

However, during grunt i get the following:

Running "enforce" task

Running "ddescribe-iit:files" (ddescribe-iit) task

Running "eslint:files" (eslint) task

Running "html2js:dist" (html2js) task
Successfully converted 29 html templates to js.

Running "test" task

Running "karma:continuous" (karma) task
26 12 2015 21:40:37.912:INFO [karma]: Karma v0.13.16 server started at http://localhost:9876/
26 12 2015 21:40:37.923:INFO [launcher]: Starting browser Chrome
26 12 2015 21:40:41.206:INFO [Chrome 47.0.2526 (Mac OS X 10.11.2)]: Connected on socket -2y7sV7Ess-kAH45AAAA with id 33951271
Fatal error: Wrong length!

Perhaps I am missing something simple in my steps??