Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Tooltip not well positioned when used on a button group #233

Closed
uniqx opened this issue Mar 17, 2013 · 6 comments
Closed

Tooltip not well positioned when used on a button group #233

uniqx opened this issue Mar 17, 2013 · 6 comments

Comments

@uniqx
Copy link

uniqx commented Mar 17, 2013

Radio Buttons are not operational when the buttons are built with a ng-repeat directive.
Also the tooltip on Radio Buttons appears at a unexpected location.

Demonstration: http://plnkr.co/edit/rW0z4t?p=preview

Would be really awesome if you could look into this issue, because I have honestly no clue how to get around this problem.

Thanks in advance. :)

@pkozlowski-opensource
Copy link
Member

@uniqx when it comes to binding there were 2 problems in your plunker:

  • you don't need to use {{}} for the btn-radio attribute, it should read: btn-radio="data.name"
  • secondly: this is a classical problem people have with AngularJS. What you need to know is that ng-repeat is creating a new scope and consequences of it. The following reading / watching should help to understand what is going on:

http://egghead.io/video/angularjs-the-dot/
https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance

Here is a plunk with bindings working: http://plnkr.co/edit/tugui4?p=preview

When it comes to the tooltip positioning, I need to look into it. @joshdmiller there was something like this already, no?

@pkozlowski-opensource
Copy link
Member

OK, some more update: you had a type in your model key (description for banana) so the tooltip was empty. Empty tooltips don't show up at all.

After this is fixed we still got positioning problem: http://plnkr.co/edit/tugui4?p=preview

@pkozlowski-opensource
Copy link
Member

OK, so the trick is that btn-group relays on relative positioning and we are not handling this case correctly. This positioning bug is a real one and needs to be fixed. I've changed the title of the issue to reflect this.

@joshdmiller
Copy link
Contributor

Twitter solved this with the container option (see twbs/bootstrap#5687), so we will too. I'm going to close this as a duplicate of #139, which will solve this...or at least provide a workaround.

I hope to open a PR on Monday.

@uniqx
Copy link
Author

uniqx commented Mar 17, 2013

Wow, thanks a lot. :)

@nostopbutton
Copy link

@pkozlowski-opensource - just wanted to add my thanks for explaining that {{}} is not required in ng-repeat, I had going crazy trying to work out why I couldn't get that to work until I stumbled across this (and now I also have a better understanding of scopes in Angular).

Cheers!

codedogfish pushed a commit to codedogfish/angular-ui-bootstrap that referenced this issue Sep 15, 2015
chore(bower): remove cruft from bower package
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants