Question

我正在开发一个Angular 4.2项目并实现bootstrap 3.3.7工具提示，但我的工具提示显示为纯文本，而不是像“bootstrap”工具提示。我已经安装了Jquery和bootstrap（它也有tooltip.js）。我也在angular-cli.json中导入bootstrap css和js文件。但不知何故，工具提示没有正确显示我尝试执行下面的代码行，
$('[data-toggle="tooltip"]').tooltip();

它按预期工作。
以下是我的 angular-cli.json 文件

` "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/toastr/build/toastr.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/toastr/build/toastr.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],`

我的问题是：为什么Angular会忽略bootstrap tooltip.js 文件。虽然当我查看 vendor.bundle.js 文件时，我确实看到 tooltip.js 文件已下载。为什么我需要显式调用tooltip（）函数来获取bootstrap工具提示？

Answer 1

这与Angular无关，而与Bootstrap本身无关：

出于性能原因，Tooltip和Popover data-apis是选择加入的，意思是你必须自己初始化它们。

＆＃34;选择加入功能＆＃34;。

下的更多信息here

Answer 2

我想出了那个问题。问题在于bootstrap，因为它需要jquery成为GLOBAL。所以我现在很好。

bootstrap 3.3.7工具提示在角度4 app中无法正常显示

2 个答案: