AngularJS - Tippy not functioning on last item in ng-repeat-CodePudding

I have an angularjs (unfortunately a necessity) component that renders in an ng-repeat.

<parent-li ng-repeat="item in layout">
 <component-with-tippy item="item"></component-with-tippy>
</parent-li>

The component has a tippy which I instantiate through the attribute configuration

<div>
 <button data-tippy-content="This is the button"></button>
</div>

The componentWithTippy.js has this in the controller:

// Tippy
  tippy('[data-tippy-content]',
    {
      trigger: 'mouseenter',
    }
  )

The problem I have is that the tippy works on all but the last item in the layout array. And if I add an item to the layout array the tippy then works on the previous last item but won't work on the new last item.

I've console.logged the items to see if the last one has any difference but it does not.

Is this an angularjs init thing?

CodePudding user response：

What you want, is to call tippy after the component is ready. In angularjs you can achieve that in two ways:

Solution Ⅰ. Use $timeout without a delay:

$timeout(function () {
 tippy('[data-tippy]', {
  content: "I'm a Tippy tooltip!",
 });
});

Solution ⅠⅠ. Use .ready() which is provided by Angular's jqLite:

$element.ready(function () {
 tippy('[data-tippy]', {
  content: "I'm a Tippy tooltip!",
 });
});