You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on May 29, 2019. It is now read-only.
Repository navigation
This repository was archived by the owner on May 29, 2019. It is now read-only.
@Skivvies - Thanks for reporting. I updated the issue to include the specific issues from your plunker.
For issue 1, the reason is that btn-group's styling is based on the last child and when the tooltip is visibile, it becomes the last child instead of the button. This issue is present in the jQuery version too: http://plnkr.co/edit/3ERe0roEG6683QyT3qVy?p=preview. I'm not sure how to cleanly fix this.
For issue two, this is due to scoping and is not an issue. Because the tooltip has a child scope, any other directives we use are in the child scope that inherits prototypically from the parent. Primitive values are copies and not references, so when the ngClick is referencing the nclicks variable, it is not the same variable as the one in the parent scope. That is, the ngClick is working, but it's updating a different variable. A good rule of thumb is that variables used in directive attributes (like ngClick and ngModel) should have a "." in them - i.e. they should be objects and not primitives. Here's your plunker changed to a function instead of the inline expression: http://plnkr.co/edit/AwEwzZ?p=preview.
Does anyone have ideas for resolving the first one? The only solution would be to move the inserted tooltip to someplace else in the DOM, but no matter where it goes, it could cause the same issue.
@Skivvies I added the wrapping as the third issue. I'll have to look at that in more detail.
The container option is related, I suppose. Prior to 2.3 (and therefore on what we based this) the tooltip node was simply inserted directly after the element on which it was defined. v2.3 added the option to specify where it gets inserted. That wouldn't solve this, per se, but it would provide special-case workarounds. The problem is there isn't a good way to do that in AngularJS; throwing around DOM nodes mixes concerns awkwardly.
I'll put some more thought into tha too. But if anyone else has ideas, feel free to jump in...
Maybe not a long-term solution, but for now tooltip could just take a boolean option for whether to use insertAfter or to append to the body, which is how tooltips worked prior to Bootstrap 2.2.2, and which would give people experiencing the issues in this ticket a workaround. What do you think?
@joshdmiller I just sketched something out in skivvies/bootstrap@d33bc6f which allows you to pass in a selector to a new tooltip-container option. I just tried it with tooltip-container="body" and it looks like the DOM insertion is working correctly, just the positioning of the tooltip needs to be updated to work for that case. Is it worth pursuing something like this solution?
@Skivvies AFAIK wrapping the original bootstrap version is done by allowing <br> tags in the tooltip's text. But this once again triggers discussion of allowing HTML markup in the model, which I hate really.
Having said this I'm more and more thinking of adding the $sanitize service so some markup would be allowed.
Activity
joshdmiller commentedon Feb 11, 2013
@Skivvies - Thanks for reporting. I updated the issue to include the specific issues from your plunker.
For issue 1, the reason is that btn-group's styling is based on the last child and when the tooltip is visibile, it becomes the last child instead of the button. This issue is present in the jQuery version too: http://plnkr.co/edit/3ERe0roEG6683QyT3qVy?p=preview. I'm not sure how to cleanly fix this.
For issue two, this is due to scoping and is not an issue. Because the tooltip has a child scope, any other directives we use are in the child scope that inherits prototypically from the parent. Primitive values are copies and not references, so when the ngClick is referencing the
nclicksvariable, it is not the same variable as the one in the parent scope. That is, the ngClick is working, but it's updating a different variable. A good rule of thumb is that variables used in directive attributes (like ngClick and ngModel) should have a "." in them - i.e. they should be objects and not primitives. Here's your plunker changed to a function instead of the inline expression: http://plnkr.co/edit/AwEwzZ?p=preview.Does anyone have ideas for resolving the first one? The only solution would be to move the inserted tooltip to someplace else in the DOM, but no matter where it goes, it could cause the same issue.
lanterndev commentedon Feb 11, 2013
Thanks for the quick reply @joshdmiller. Did you see the tooltip improvements in http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/? Is the new
containeroption relevant here? Also, any idea why the long tooltip text isn't wrapping? I think that's a third issue here.joshdmiller commentedon Feb 11, 2013
@Skivvies I added the wrapping as the third issue. I'll have to look at that in more detail.
The container option is related, I suppose. Prior to 2.3 (and therefore on what we based this) the tooltip node was simply inserted directly after the element on which it was defined. v2.3 added the option to specify where it gets inserted. That wouldn't solve this, per se, but it would provide special-case workarounds. The problem is there isn't a good way to do that in AngularJS; throwing around DOM nodes mixes concerns awkwardly.
I'll put some more thought into tha too. But if anyone else has ideas, feel free to jump in...
lanterndev commentedon Feb 11, 2013
Maybe not a long-term solution, but for now tooltip could just take a boolean option for whether to use insertAfter or to append to the body, which is how tooltips worked prior to Bootstrap 2.2.2, and which would give people experiencing the issues in this ticket a workaround. What do you think?
lanterndev commentedon Feb 11, 2013
@joshdmiller I just sketched something out in skivvies/bootstrap@d33bc6f which allows you to pass in a selector to a new
tooltip-containeroption. I just tried it withtooltip-container="body"and it looks like the DOM insertion is working correctly, just the positioning of the tooltip needs to be updated to work for that case. Is it worth pursuing something like this solution?lanterndev commentedon Feb 12, 2013
Hey @joshdmiller, did you happen to get any ideas about the wrapping issue? I'm trying to figure out what's going on and not having any luck.
pkozlowski-opensource commentedon Feb 13, 2013
@Skivvies AFAIK wrapping the original bootstrap version is done by allowing
<br>tags in the tooltip's text. But this once again triggers discussion of allowing HTML markup in the model, which I hate really.Having said this I'm more and more thinking of adding the $sanitize service so some markup would be allowed.
pkozlowski-opensource commentedon Feb 15, 2013
OK, we've started discussing several issues here but in the end we've got 2 things to tackle:
Going to close this one so we've small, focused issues to tackle.
Merge pull request angular-ui#132 from angular-ui/event-on-select