more tooltip issues

[lanterndev]

Two issues:

1. Tooltip breaks btn-group styling
2. Tooltip breaks ng-click
3. Long tooltips don't wrap

See http://plnkr.co/edit/QVTAoP

[joshdmiller]

@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.

[lanterndev]

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 container option relevant here? Also, any idea why the long tooltip text isn't wrapping? I think that's a third issue here.

[joshdmiller]

@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]

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]

@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?

[lanterndev]

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]

@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]

OK, we've started discussing several issues here but in the end we've got 2 things to tackle:

1. broken styling due to tooltip / popover elements being attached after an element on which a directive is placed. This one is tracked in Consider add container option, that solves some bootstrap issues #139 as well
2. No wrapping. I've opened a separate issue for this so we know what we should focus on: [tooltip] Add text wrapping in a tooltip #142

Going to close this one so we've small, focused issues to tackle.