用于动态更改内容的 Bootstrap 工具提示

2024-05-20 • 问答

我使用 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>

您可以使用相同的逻辑来继续您的应用程序。

用于动态更改内容的 Bootstrap 工具提示

oxforever 回答：用于动态更改内容的 Bootstrap 工具提示

大家都在问