AngularJS tooltips/popovers with ng-repeated content

Question

I am using Foundation 5 with AngularJS in my project. I have the following use case:

Click on a 'div' which is inside an ng-repeat.
Fetch a list specific to that div in response to the click.
Show that list in an ng-repeat in a tooltip/popover of that div(which was clicked).

How do I go about generating that tooltip?

I tried:

this library but I encountered some issues as mentioned in this question.
angular-foundation, but the popovers here don't have a popover-template functionality(like in ui.bootstrap).

AND I don't want to use ui.bootstrap because I am using Foundation 5 (Its a bad idea, right?).

demo for what? I am asking for an approach, I don't have an approach right now. — Tarun Dugar, Sep 29 '15 at 12:04
html template is fine, but in that template I need ng-repeated content which updates when the content is changed in the controller. I dont see any support for this in angular-foundation. — Tarun Dugar, Sep 29 '15 at 12:10

score 1 · Accepted Answer · answered Oct 02 '15 at 11:10

Cannot say what "approach" exactly you need, in your particular case (fetch a list of something after something else has been clicked) - but you can always generate the content of the tooltip on the fly :

<a href="#" class="has-tip" tooltip-html-unsafe="{{ buildToolTip() }}">TEST</a>

function :

$scope.buildToolTip = function() {
   var list = ''
   for (var i=0;i<3;i++) {
      list+='<li><em>element #'+i+'</em></li>';
   }
   return '<ul>'+list+'</ul>' 
}

now use the outcome of "Fetch a list specific to that div in response to the click" instead of the demonstration loop - you have the fetched list stored in a $scope variable somewhere anyway, I assume?

http://plnkr.co/edit/3P9PSN2FsRyViCVlqReg?p=preview

AngularJS tooltips/popovers with ng-repeated content

1 Answers1