Javascript 只显示简单的工具提示，不显示任何样式_Javascript_Html_Css_Bootstrap 5_Jquery Ui Tooltip

Javascript 只显示简单的工具提示，不显示任何样式

javascript html css

Javascript 只显示简单的工具提示，不显示任何样式,javascript,html,css,bootstrap-5,jquery-ui-tooltip,Javascript,Html,Css,Bootstrap 5,Jquery Ui Tooltip,我不知道为什么当我将鼠标悬停在a上时，只会显示一个带有文本的简单工具提示。它没有引导文档中显示的样式。（我正在使用js创建a） HTML 代码块中有很多错误其中包括两次引导JS。第一次作为捆绑，第二次作为独立。选择一个或另一个。见： $（'[data toggle=“tooltip”]'）。工具提示（{'placement'：'bottom'}）是引导4方法。这不是Bootstrap 5方法-请参阅：我认为，您的JS是在工具提示初始化之后调用的，因此它在DOM中还没有btn1组件。所以

我不知道为什么当我将鼠标悬停在

上时，只会显示一个带有文本的简单工具提示。它没有引导文档中显示的样式。（我正在使用js创建

）

HTML

代码块中有很多错误

其中包括两次引导JS。第一次作为捆绑，第二次作为独立。选择一个或另一个。见：

$（'[data toggle=“tooltip”]'）。工具提示（{'placement'：'bottom'}）

是引导4方法。这不是Bootstrap 5方法-请参阅：

我认为，您的JS是在工具提示初始化之后调用的，因此它在DOM中还没有

btn1

组件。所以它不是草签的。为此，您需要在组件已经在DOM中之后初始化工具提示

行

btndiv.append（btn1）<未定义代码>btndiv

最好只给您一个工作示例（我假设您想要使用jQuery）：

HTML:

JS:

const btn1=document.createElement（'a'）；
btn1.innerHTML='DELETE'；
btn1.setAttribute（'data-bs-toggle'，'tooltip'）；
btn1.setAttribute（'data-bs-placement'，'bottom'）；
btn1.setAttribute（'title'，'Delete'）；
btn1.href='#'；
常量btndiv=$（'.btndiv'）；
btndiv.append（btn1）；
var tooltipTriggerList=[].slice.call（document.querySelectorAll（'[data bs toggle=“tooltip”]'））
var tooltipList=tooltipTriggerList.map（函数（tooltipTriggerEl）{
返回新的引导。工具提示（tooltipTriggerEl）
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--BOOTSTRAP-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" 
    rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

    <!--GOOGLE FONTS-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">

    <!--CUSTOM STYLESHEET-->
    <link rel="stylesheet" href="../CSS/homePage.css">
    <title>App</title>
</head>

<body>

    <div class = "btndiv">
        <!--DIV FOR STORING ANCHOR TAG-->
    </div>

    <!--JQUERY-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!--BOOTSTRAP-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
        integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
        integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
        crossorigin="anonymous"></script>
    
    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip({ 'placement': 'bottom' });
        });
    </script>

    <script src="../JAVASCRIPT/homePage.js"></script>

const btn1 = document.createElement('a');
btn1.innerHTML = 'DELETE';
btn1.setAttribute('data-bs-toggle', 'tooltip');
btn1.setAttribute('data-bs-placement', 'bottom');
btn1.setAttribute('title', 'Delete');
btn1.href = '#';
btndiv.append(btn1);