Bootstrap 4 工具提示未显示在动态加载的元素上答案

【问题标题】：Boostrap 4 tooltip not showing on dynamically-loaded elementsBootstrap 4 工具提示未显示在动态加载的元素上
【发布时间】：2022-01-19 23:25:47
【问题描述】：

显示的工具提示是默认的工具提示，而不是引导程序 4 的提示。

我得到的工具提示：

对比我应该得到的工具提示：

我根据 Boostrap (4.5.0) 的要求使用此激活头部中的工具提示：

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
</script>

问题是，当我在 devtools 的控制台中运行这个确切的命令时，它会激活它们并显示正确的工具提示。有谁知道是什么干扰？

这是我的完整头部部分：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Test | Results</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" integrity="sha384-ujbKXb9V3HdK7jcWL6kHL1c+2Lj4MR4Gkjl7UtwpSHg/ClpViddK9TI7yU53frPN" crossorigin="anonymous"></script>
    <script src='https://cdn.plot.ly/plotly-2.6.3.min.js'></script>
    <script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdbe-molstar-plugin-1.2.1.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"/>

    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
    <link href="../../css/custom_features.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdbe-molstar-1.2.1.css">
    <link rel="stylesheet" type="text/css" href="../../css/rcsb-molstar.css">
    <script>
        $(function() {
            $("#header").load("../../pages/header_job.html");
            $("#footer").load("../../pages/footer_job.html");
        });

        $(document).ready(function(){
          $('[data-toggle="tooltip"]').tooltip();
        });

    </script>
</head>

【问题讨论】：

你能把它应用在哪里吗？您是否在控制台上收到任何错误消息？

标签： javascript html jquery css bootstrap-4

【解决方案1】：

好的，我终于找到了解决方案。问题在于工具提示位于 javascript 中加载的元素上。
所以激活工具提示的通用功能不起作用，我需要使用

$("#id").load("./html.txt", function(){
    $('[data-toggle="tooltip"]').tooltip();
});

【讨论】：