Tippy.js 仅在 Angular 项目的第一页刷新后有效

Question

我在我的angular项目上安装了tippy.js，它是一个工具提示库(https://atomiks.github.io/tippyjs/)，但只有在第一次刷新页面后才有效。

我已经通过 npm install tippy.js 命令安装它并将其导入到 angular.json 文件中如下：

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

负责调用它的html元素是这样写的：

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

我认为在页面完全构建之前加载库，但不知道如何在 Angular 项目上执行...

Answer 1

我没用过 tippy，但阅读他们的 docs，看起来你需要运行一个 tippy(<selector>) 才能运行通过选定的元素和"activate" DOM 更改，您称之为工具提示。

在 Angular 中，我猜它会像这样工作：

import tippy from 'tippy.js'

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

编辑：stackblitz demo，似乎按预期工作。

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