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

我没有用过小费，但是阅读它们的docs似乎需要运行tippy(<selector>)才能使其遍历所选元素并“激活” DOM更改，您称之为，工具提示。

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

import tippy from 'tippy.js'

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

编辑：stackblitz demo，似乎可以正常工作。