使用引导程序添加工具提示的问题（Angular，ts）答案

【问题标题】：Problem with adding tooltip with bootstrap (Angular, ts)使用引导程序添加工具提示的问题（Angular，ts）
【发布时间】：2021-08-22 17:15:24
【问题描述】：

我想向我正在构建的站点（Angular，ts 中）添加一个工具提示（在引导程序的帮助下）。

我使用了链接： https://getbootstrap.com/docs/4.0/components/tooltips/

问题：

我创建的工具提示如下所示：

我想要得到的工具提示是：

我的代码：

componentName.component.ts:

  <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
  </button>

index.html:

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
 

  <!-- For tooltips: -->
  <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
  </script>

问题： 你知道我的错误在哪里吗？谢谢！

【问题讨论】：

标签： html angular bootstrap-4 tooltip angular-ui-bootstrap

【解决方案1】：

我认为您错过了 Button 元素上的 data-toggle 属性。另一个重要的问题是你是否在 Angular 中导入了 jquery？使用引导程序的原生 Angular 方式是 ngx-bootstrap

【讨论】：

谢谢！我在 Button 元素上添加了 data-toggle 属性，但问题仍然存在（我更新了问题）。你有别的想法吗？我使用引导 V4
对于 Angular（不是 Angular js），最好的解决方案是 ngx-bootstrap。它使用简单并且与引导标记兼容，您可以使用 v4 或 v3。将 Jquery 与 Angular 一起使用会导致性能问题，不推荐使用。

【解决方案2】：

您已经混合使用了 bootstrap v4 和 v5。

您的组件的标记来自bootstrap v5 和来自bootstrap v4的javascript代码。

【讨论】：

你是对的！谢谢！我调整了这两段代码以适应 bootstrap v4.6，但问题仍然存在。（我更新了问题）。您有其他想法吗？