I recently encountered an issue with my directive that displays a larger image as a tooltip when hovering over a small image. Strangely, the directive stopped functioning properly after I placed it within an ng-repeat block. Although the directive is executing and creating the necessary tooltip elements at the bottom of the body, nothing appears upon mouseover.
Here is the HTML snippet:
<div ng-repeat="photo in photos track by $index" id="photo{{$index}}" data-tooltip-img="./photos/{{photo.large}}" big-photo>
<a href="#">
<img src="./photos/{{photo.small}}" alt="{{photo.name}}">
</a>
</div>
And this is the directive implementation:
.directive('bigPhoto', function () {
return {
restrict: 'A',
link: function (scope, el, attr) {
var targetTag = "#"+attr['id'],
xPos = (attr['tooltipPos'] && attr['tooltipPos'] === 'left') ? -304 : 20;
angular.element(targetTag).wTooltip({
delay: 0,
offsetX: xPos,
offsetY: 20,
content: '<img src="'+attr['tooltipImg']+'" alt="'+attr['title']+'">',
style: false
});
}
};
})
For reference, here is the link to the jsFiddle demonstrating the issue: http://jsfiddle.net/codephobia/k6Ljzg7j/