如何在鼠标悬停时在工具提示中显示对象的值？

Question

在我的项目中，玩家可以生成具有随机名称和属性的项目。每个项目都有自己的一组属性，如名称、攻击值、防御值等。

我想制作一个工具提示，在鼠标悬停时显示项目值：
1-我不能硬写在 HTML 中（我可能会为每个项目创建一个带有元素的 div 和 link 一个 class 到 show/hide悬停...但这会很乏味，而且我不确定它在长时间运行（100 多个项目？）中是否会表现出色。
2- 我想避免使用 JQuery / boostrap 和其他库，除非没有它们是不可能的。

我看过带有数据属性的基本解决方案，但每个项目可能有十几个 key:value 可以在数百个中显示，所以，可能对我没有用。我试图制作一个由 JS 函数修改的 CSS 变量，但是......嗯，这不是 CSS var 的方式。显然有效。

let myObject = {
    prop1 : "name",
  prop2 : 12,
};

document.getElementById("myID").addEventListener('mouseenter', function() {
    displayEquipmentStats(myObject);
})

function displayEquipmentStats(item) {
    let toDisplayContent = "";
    toDisplayContent += item.prop1 + " att : ";
    toDisplayContent += item.prop2;
    document.body.style.setProperty("--EquipmentStats", toDisplayContent);
 }

:root {
  --Content: "";
}

#myID:hover::after {
    white-space: pre;
    content: "hi there"; /* I wanted to display var(--Content) here, sadly, it's not possible */
    position: absolute;
    top: 1.5em;
    left: 3em;
    z-index: 1;
    padding: 0.4em;
    background: #413219;
    color: #fff;
    border-radius: 4px;
}

<div id="myID"> some random text</div>

这是一个片段，或多或少显示了我想要实现的目标（同样，我知道 CSS var 不会那样工作）。
在这一点上欢迎任何对类似方法的见解，谢谢。

Answer 1

在不了解您的数据结构、数据传输方法等的情况下，基本上是一个过于宽泛的问题，很可能因此而被关闭，这是一个您可以在现代上做的事情的快速示例即使有一百多个元素，常青浏览器也应该做得很好。

这只是一个 proof-of-concept 示例，大多数人会向您收取更多的时间，因为它通常 out-of-scope 用于快速问答网站，但可能会让您的创造力源源不断。您还可以更改为 mouseover 事件，并仅在事件开始的静态位置显示工具提示。干杯。

const tooltip = document.getElementById('tooltip-example'),
      dummyData = [
  {
    "id": "0",
    "name": "Mickey Mouse",
    "attack": "melee",
    "damage": "42",
    "range": "157",
    "defense": "turrets",
    "faction": "lost souls"
  },
  {
    "id": "1",
    "name": "Tinker Bell",
    "attack": "sword",
    "damage": "34",
    "range": "157",
    "defense": "cannons",
    "faction": "south side"
  },
  {
    "id": "2",
    "name": "Goofy",
    "attack": "archer",
    "damage": "55",
    "range": "987",
    "defense": "tigers",
    "faction": "westside"
  },
  {
    "id": "3",
    "name": "Donald Duck",
    "attack": "fire",
    "damage": "97",
    "range": "533",
    "defense": "bears",
    "faction": "killer koalas"
  },
  {
    "id": "4",
    "name": "Minnie Mouse",
    "attack": "roundhouse",
    "damage": "76",
    "range": "234",
    "defense": "squirrels",
    "faction": "rabid kittens"
  },
  {
    "id": "5",
    "name": "Daisy Duck",
    "attack": "lightning",
    "damage": "45",
    "range": "534",
    "defense": "looks",
    "faction": "angry puppies"
  }
];

handleEvents = () => {
  const items = document.querySelectorAll('[data-attribs]');
  
  items.forEach(
    item => item.addEventListener('mousemove', function (e) {
    
    tooltip.style.display = 'block';
    
    let x = event.clientX,
        y = event.clientY;
        
    const attribs = JSON.parse(e.target.dataset.attribs);
    
    tooltip.style.left = `${x}px`;
    tooltip.style.top = `${y}px`;
    tooltip.innerHTML = `
      <table>
        <tr><td>Name [id]</td><td>${attribs.name} [${attribs.id}]</td></tr>
        <tr><td>Attack</td><td>${attribs.attack}</td></tr>
        <tr><td>Damage</td><td>${attribs.damage}</td></tr>
        <tr><td>Range</td><td>${attribs.range}</td></tr>
        <tr><td>Defense</td><td>${attribs.defense}</td></tr>
        <tr><td>Faction</td><td>${attribs.faction}</td></tr>
      </table>
    `;
    
    
  }));
 
  items.forEach(
    item => item.addEventListener('mouseout', function (e) {
      tooltip.style.display = 'none';
  }));
  
}

generateItems = () => {

  for (let i = 0, x = dummyData.length; i < x; i++) {
  
    const newItem = document.createElement('div');
    newItem.className = 'default-item';
    newItem.style.backgroundColor = `#${(Math.random()*0xFFFFFF<<0).toString(16)}`;
    newItem.style.color = "#000";
    newItem.innerText = dummyData[i].name;
    newItem.dataset.attribs = JSON.stringify(dummyData[i]);
    document.body.appendChild(newItem);
  
  }
  
  handleEvents();
}

generateItems();

body {
  padding: 2rem;
}

.default-item {
  display: inline-block;
  padding: .5rem;
  margin: .25rem;
  color: #212121;
  cursor: pointer;
  border: #212121 1px solid;
}

#tooltip-example {
  color: #fff;
  background-color: rgba(0,0,0,.8);
  position: absolute;
  z-index: 99999999;
  cursor: pointer;
  padding: .5rem;
  pointer-events: none;
  display: none;
}

#tooltip-example table {
  border-collapse: collapse;
}

#tooltip-example table td {
  padding: .15rem .5rem;
  white-space: nowrap;
}

#tooltip-example table td:first-child {
  text-align: right;
  border-right: #fff 1px solid;
}

<div id="tooltip-example"></div>

如何在鼠标悬停时在工具提示中显示对象的值？

How to display value from object in tooltip on mouseover?

html

javascript

css

tooltip