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.
Tooltip does not work inside repeat with dynamic value #69
Description
Hello...
When I try the following, the column value (user.firstName) never displays. When I remove the tooltip directive, it reappears. I also tried displaying a hard coded value and the tooltip reappears although it was not displayed in the correct location. (This may be due to the fact, that I am rendering a template).
<tr ng-repeat="user in users | filter:myFilter | orderBy:predicate:reverse">
<td>....</td>
<td><a><span tooltip-placement="right" tooltip="Some Text">{{user.firstName}}</span></a></td>
</tr>
Please let me know if made a mistake.
Thanks!
Chris
Activity
pkozlowski-opensource commentedon Jan 14, 2013
@christophercantu could you please prepare a plunk with a reproduce scenario? It would help a lot!
pkozlowski-opensource commentedon Jan 14, 2013
OK, I can see, there is clearly something wrong: http://plnkr.co/edit/x8gCfz?p=preview
pkozlowski-opensource commentedon Jan 14, 2013
@joshdmiller It looks like a scoping issue, didn't look into the details, but looks like transclusion breaks things here...
joshdmiller commentedon Jan 14, 2013
Well, shoot-darn. I'll PR a fix in a little while.
ajoslin commentedon Jan 14, 2013
Thanks for making this @joshdmiller. I've been wanting to have this in for awhile but never got to it.
Could you also move the mouseenter and mouseleave events to the template (probably just by adding show and hide to the popover scope)? We want the template to have full control of dom-ish stuff with these directives. Someone might want to have this tooltip on mobile for example, and wouldn't want the mouseenter and mouseleave events stuck in the directive code.
Also sometime we should factor out the placement logic to a service or directive controller and add a popover directive. Popover will probably also want to work like $dialog, being a service that opens with a template. I'm not sure about it yet. If we do it the service way, we should factor out a bit of $dialog's functionality too (the insert-html-and-locals-and-controller-into-dom part).
joshdmiller commentedon Jan 14, 2013
@ajoslin For the leave/enter events, we cannot move them to the template because there is no template for the DOM element that receives the events. This follows the general pattern of the jQuery plugin in that we do not touch the element on which the directive is applied. On
mouseenterof thetooltipdirective's element, we create an additional DOM element from thetooltip-popupdirective that is compiled and inserted after the dom element oftooltip. It is destroyed onmouseleave.The only way I can think of to put the events in the template would be to have the
tooltipdirective replace the original DOM element and transclude its contents; I actually prototyped it before I wrote this version, but it seriously limited on what we could place the tooltip.I also created another version that kept the popup element in the DOM and showed/hid it as necessary, so that logic was entirely within the template. Problem there was that the Boostrap CSS by default gives the
tooltipclass a highz-index, so it blocked themouseenterevents of adjacent tooltips. I solved this, too, but only by including a hack to conditionally set thez-indexof the popover to-1. Since this was also in the link function and less portable across templates/styles, I opted for the other solution.Also, the trigger events will eventually be configurable (defaulting to
mouseenter/mouseleave, but also supportingfocus/blur, etc.) to be feature-complete with the jQuery plugin. So, you make good points, but I am unsure how to solve them here. If you have suggestions, I'd love to hear them.For the placement logic and popover - I completely agree that the placement logic would be best externalized so it can be reused. That's not a problem to implement. We discussed on the mailing list a while back that there would be popover/tooltip/dialog overlap we'd have to discuss before writing the popover directive, but that we'd cross that bridge when we came to it.
I guess we've come to it. :-)
ajoslin commentedon Jan 14, 2013
Oh you're right, it wouldn't work in the template. Never mind me then haha
...and I need to remember to check that angular-ui mailing list
Sent from my iPhone
On Jan 14, 2013, at 4:53 PM, Josh D Miller notifications@github.com wrote:
fix(tooltip): Transcludes contents to allow dynamic selector text
fix(tooltip): Transcludes contents to allow dynamic selector text
joshdmiller commentedon Jan 15, 2013
I never opened the PR on the first one, but Github apparently decided to reference here it anyway. They're the same commits, but the second one with the real PR is the right commit to look at.
fix(tooltip): Transcludes contents to allow dynamic selector text
eeerrrttty commentedon Oct 14, 2016
Same issue here... I remove the "ng-repeat", then it works, i put it again, it stop working, it works, then it stop working....
adriangordon1231 commentedon Feb 23, 2017
@eeerrrttty try putting the dynamic value in curly braces .
uib=tooltip= "{{ data.value }}