0

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...

Gustavo Branco
  • 49
  • 8
  • when exactly are you initiating a `tippy('selector')` ? – Stavm May 15 '19 at 12:59
  • Actually I'm not. When I try and do it, the tooltip stops working even after refreshing... the way I tried was to import another js file into scripts like so "scripts": [ "./node_modules/popper.js/dist/umd/popper.min.js", "./node_modules/tippy.js/umd/index.all.min.js", "src/assets/js/tippy.js" ], the tippy.js file had only the following line: tippy('#tippy') and when I did it, I also changed data-tippy="Tooltip" to data-tippy-content="Tooltip" – Gustavo Branco May 15 '19 at 13:04

1 Answers1

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.

Stavm
  • 7,833
  • 5
  • 44
  • 68