Tengo un componente angularjs (desafortunadamente una necesidad) que se procesa en una repetición ng.
<parent-li ng-repeat="item in layout"> <component-with-tippy item="item"></component-with-tippy> </parent-li>El componente tiene un tippy que instalo a través de la configuración de atributos
<div> <button data-tippy-content="This is the button"></button> </div>El componenteWithTippy.js tiene esto en el controlador:
// Tippy tippy('[data-tippy-content]', { trigger: 'mouseenter', } )El problema que tengo es que el tippy funciona en todos menos en el último elemento de la matriz de diseño. Y si agrego un elemento a la matriz de diseño, Tippy funciona en el último elemento anterior pero no funcionará en el nuevo último elemento.
He registrado los elementos en la consola para ver si el último tiene alguna diferencia, pero no es así.
¿Es esto una cosa de inicio de angularjs?
Lo que quiere es llamar a tippy después de que el componente esté listo. En angularjs puedes lograr eso de dos maneras:
Solución Ⅰ . Usa $timeout sin demora:
$timeout(function () { tippy('[data-tippy]', { content: "I'm a Tippy tooltip!", }); });Solución ⅠⅠ . Use .ready() que proporciona jqLite de Angular:
$element.ready(function () { tippy('[data-tippy]', { content: "I'm a Tippy tooltip!", }); });