Tippy.js only works after first page refresh on Angular project

Question

I have installed tippy.js on my angular project, which is a tooltip library (https://atomiks.github.io/tippyjs/), but it only works after refreshing the page for the first time.

I've installed it through npm install tippy.js command and imported it into angular.json file as follows:

        "scripts": [
          "./node_modules/popper.js/dist/umd/popper.min.js",
          "./node_modules/tippy.js/umd/index.all.min.js"
        ],

The html element responsible for calling it is written like so:

 <span data-tippy="Tooltip" class="layout-semester theme-semester"><strong>2019</strong>-1sem</span>

I think the library is being loaded before the page is fully constructed, but have no idea on how to do it on an Angular project...

Answer 1

I haven't used tippy, but reading their docs, it looks like you need to run a tippy(<selector>) for it to run through selected elements and "activate" the DOM change, which you call, a tool tip.

in Angular, i'd guess it would work something like:

import tippy from 'tippy.js'

ngAfterViewInit() {
    tippy('span');
}

EDIT: stackblitz demo, seems to work as expected.