0

I have an angular 7 app where I have a directive to create tooltips using tippy.js 4.0.2. This works perfectly fine on local mode (ng serve). However as soon as I try to integrate it into a page running on my server, which has tippy.js 2.6.0 as a global variable, there is the following error on mouseup when clicking on an element which has a tooltip:

TypeError: i is undefined tippy.all.min.js:1:23177

Why are the two versions of tippy interfering and how can I fix the bug?

My tippy directive contains the following important parts:

import {
    Instance as TippyInstance,
    Props as TippyOptions,
    default as tippy,
} from 'tippy.js';

/** fake component needed to be able to include tippy theme styles */
@Component({
    selector: "[tooltip]",
    template: `<ng-content></ng-content>`,
    styleUrls: [
        '../../../node_modules/tippy.js/themes/light.css',
    ],
    encapsulation: ViewEncapsulation.None
})
@Directive({
    /* tslint:disable-next-line */
    selector: '[tooltip]',
})

and to update the update the options dynamically I use

if (!this.tippyInstance) this.tippyInstance = tippy(this.el.nativeElement, this.tippyOptions || undefined) as TippyInstance;
else this.tippyInstance.set(this.tippyOptions);
Brian
  • 21
  • 5

1 Answers1

0

I was not able to solve the problem, however a downgrade on tippy.js v2.6.0 in my angular project made the error disappear as expected.

Brian
  • 21
  • 5