如何解决用于动态更改内容的 Bootstrap 工具提示
我使用 Bootstrap 工具提示为项目创建漂亮的 HTML 工具提示。我基本上有一个 .png 图像形式的技能图像
array([[[[ 1,2],[ 3,4]],[[ 1,4]]],[[[ 10,20],[ 30,40]],[[ 10,40]]],[[[ 100,200],[ 300,400]],[[ 100,400]]],[[[1000,2000],[3000,4000]],[[1000,4000]]]])
我将图像定义为一个变量
<img id="skill" src="ice-bolt-inactive.png" data-toggle="tooltip" data-html="true" title="" />
然后我像这样启动工具提示:
let skillImage = document.getElementById('skill');
现在,当我点击技能图像时,我会启动一个 onclick 函数,它会增加 iceBolt.leveL++; .这成功地做到了(我还将 iceBolt.level 记录到控制台中,因此我确认它正在更改)但引导工具提示保持不变(不反映 iceBolt.level,即使我已将其设置为显示它)
我对引导工具提示的使用是否不好,或者引导工具提示不会处理这样的事情。我想使用它们,因为它们反应灵敏且易于使用。
解决方法
更新:
代码截图共享,将帮助您在应用程序中发生某些特定事件时更新工具提示标题。
想法是:使用返回更新数据的函数调用动态设置我的标题。
$("#skill").tooltip({
placement: "right",title: userDetails,// userDetail() is a function which will return our updated data
html: true,});
函数看起来像;
// Get user details for tooltip
function userDetails() {
return tooltipText;
}
我们更新工具提示内容的事件处理程序。
document.querySelector("button").addEventListener("click",() => {
tooltipText += "Add"; // Updating my data
userDetails();// Sending updated Title
})
完整代码:
$(document).ready(function () {
// Add tooltip
$("#skill").tooltip({
placement: "right",html: true,});
});
var tooltipText = "Hello";
// Get user details for tooltip
function userDetails() {
return tooltipText;
}
document.querySelector("button").addEventListener("click",() => {
tooltipText += "Add";
userDetails();
});
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<img
id="skill"
class="skill"
src="https://picsum.photos/100"
data-toggle="tooltip"
data-html="true"
data-selector="true"
alt="skill image"
/>
<p id="ice-bolt-level"></p>
<button>Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
您可以使用相同的逻辑来继续您的应用程序。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。