javascript - 仅显示简单的工具提示,没有任何样式
问题描述
我不知道为什么当我将鼠标悬停在我a
只有一个简单的工具提示上时会显示文本。其中没有样式,如引导文档中所示。(我正在a
使用js创建)
HTML
<!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>
我的 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.append(btn1);
解决方案
您的代码块中有很多错误。
Bootstrap JS 包含两次。第一次作为捆绑包,第二次作为单机。选择其中之一。请参阅:https ://getbootstrap.com/docs/5.0/getting-started/introduction/#js
$('[data-toggle="tooltip"]').tooltip({ 'placement': 'bottom' });
是 Bootstrap 4 方法。这不是 Bootstrap 5 方法 - 请参阅:https ://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere我假设您的 JS 是在工具提示初始化之后调用的,因此它不会
btn1
在 DOM 中包含该组件。所以它没有被初始化。为此,您需要在组件已经在 DOM 中之后初始化工具提示。行
btndiv.append(btn1);
..btndiv
未定义。
最好只给你一个工作示例(我假设你想使用 jQuery): https ://jsfiddle.net/vinorodrigues/rLjzys8k/2/
HTML:
<div class = "btndiv">
<!--DIV FOR STORING ANCHOR TAG-->
</div>
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 = '#';
const btndiv = $('.btndiv');
btndiv.append(btn1);
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
推荐阅读
- javascript - 无法在对象数组中推送新对象
- java - Spring Security:我可以加载静态资源但不能加载图像
- php - 在 FOSUserBundle 中通过 post 方法注册新用户时禁用 CSRF
- java - Spring Cloud Stream 函数:调用函数
通过 REST 调用并将其输出到 KAFKA 主题 - ios - 将数据从一个 TableView 传输到另一个 TableView
- jenkins - 多个 Jenkins 参数化构建值将值传递给 Jenkinsfile 用于声明性管道
- c++ - 如何将 float (*)[6] 转换为 float** 类型?
- angular - 错误:“AbstractControl”类型缺少“FormGroup”类型的以下属性:控件、registerControl、addControl、removeControl、
- java - 是否有必要使“AtomicBoolean”也成为“volatile”?
- django - Django Admin:内联提交的字段