javascript - 如何在 HTML 中显示 js 变量值， 具有鼠标悬停效果

Question

在 javascript 中，我有一个变量，其中包含我从 JSON 获取的一些值。

var a =recipe[0].step[1].processingTime;//here processing time is stored in var a

当我将鼠标悬停在 HTML 中的一个小 div id 上时，我想通过显示描述框来显示该值。

<tr>
    <td>Recipe 0</td>
    <td>
        <div id="p1"><div>
    </td>
</tr>

如何做到这一点？谁能告诉我一个简单的解决方案。

Answer 1

如果您只想要简单的原生 html 工具提示，您只需设置元素 title 属性即可。例如，当您将鼠标悬停在 SO 投票箭头上时显示的内容

document.getElementById("p1").setAttribute("title",recipe[0].step[1].processingTime);

演示

var text = "13ms";

document.getElementById("p1").setAttribute("title",text);

#p1 {
  width:80px;
  height:80px;
  background:#323232;
}

<div id="p1"></div>

但是，如果您想要一个更高级的，您可以使用一点 javascript 并使用 css :hover 来做到这一点, :after , attr css function ，以及 content属性。

为您的 div(或任何元素)提供如下所示的 css 类:

.withTooltip:hover:after {
   content:attr(data-tooltip);
   display:block;
   padding:10px;
   background:#323232;
   border-radius:4px;
   border:#000000;
   color:#FFFFFF;
}

• :hover 只会在元素被悬停时应用样式盘旋在上空。
• :after 将创建一个伪元素
• conent 可用于设置伪元素将显示的文本
• attr 将获取传递的属性名称并获取其值属性

然后使用 JavaScript 将属性设置为您保存的文本(在本例中使用数据工具提示)

document.querySelector("p1").dataset.tooltip = recipe[0].step[1].processingTime;
//or
document.querySelector("p1").setAttribute("data-tooltip",recipe[0].step[1].processingTime);

演示

var someData = ["13ms","100ms","8ms","67ms"];
var elements = document.querySelectorAll(".withTooltip");
for(var i=0; i<elements.length; i++){
  elements[i].dataset.tooltip = someData[i];
}

.box {
  width:50px;
  height:50px;
  background:#86DDFF;
  margin:10px;
  position:relative;
  display:inline-block;
}

.withTooltip:after {
  content:attr(data-tooltip);
  display:block;
  padding:10px;
  position:absolute;
  right:-40px;
  top:0px;
  background:#323232;
  border-radius:4px;
  border:#000000;
  color:#FFFFFF;
  opacity:0;
  transition:all 0.3s; 
  z-index:100;
  pointer-events:none;
}
.withTooltip:hover:after {
  opacity:1;
}

<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>