没有 ID 的内联 CSS 悬停时的工具提示

Question

将鼠标悬停在标签上时应显示工具提示。然而，这些标准适用：

不应该使用“a:hover”，head 标签中没有CSS 类，必须使用内联CSS
必须是纯js，没有库
它必须在没有预定义 ID 的情况下工作，以便它可以通用（模式总是这样：一个标签后面跟着一个 span 标签，而 span 标签内容是工具提示内容）
html 格式应该是可能的（至少，基本格式如 b、u、ul/ol/li）

我可能已经拥有它（使用 onmouseover/onmouseout）但只是差不多。见代码：

如何使工具提示始终显示在实际 a 标签下方（目前，它始终显示在第一个 a 下方）？
在 p 标签中使用了 a 标签。如何让它工作（整个跨度目前没有隐藏）？

function show(item) {
     const str = item.nextElementSibling;
     str.style.visibility = "visible";
  }
  function hide(item) {
    const str = item.nextElementSibling;
    str.style.visibility = "hidden";
  }

<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#" onMouseOver="show(this)" onMouseOut="hide(this)">Info 1</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 1:</b><ul><li>test 1</li><li>test 2</li></ul></span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#" onMouseOver="show(this)" onMouseOut="hide(this)">Info 2</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 2</b><ul><li>test 1</li><li>test 2</li></ul></span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#" onMouseOver="show(this)" onMouseOut="hide(this)">Info 3</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 3</b><ul><li>test 1</li><li>test 2</li></ul></span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#" onMouseOver="show(this)" onMouseOut="hide(this)">(Info 4)</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 4</b><ul><li>test 1</li><li>test 2</li></ul></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

Answer 1

我删除了您在 HTML 中使用的所有内联事件处理程序。

我对代码的解释请查看JS注释。

const tooltipPadding = { top: 32, left: 16, }; // The extra em padding you set on the span converted to px 
const hide = element => element.style.visibility = 'hidden'; // Hide function

function show({ target }) { // Destrucutring the event obejct to get only the targetted element
  const element = target.nextElementSibling;
  const { left, top } = target.getBoundingClientRect(); // To get the position of the hovered a tag

  element.style.visibility = "visible";

  // To set the top and left position of the element
  element.style.left = `${left + tooltipPadding.left}px`;
  element.style.top = `${top + tooltipPadding.top}px`;
  target.addEventListener('mouseleave', _ => hide(element), { once: true }); // Adding an event to the a tag on mouseleave to hide the span only once.
}

// Select all the a tag and add the mouseenter event listener
[...document.querySelectorAll('a')].forEach(a => a.addEventListener('mouseenter', show));

<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#">Info 1</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 1:</b><ul><li>test 1</li><li>test 2</li></ul></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#">Info 2</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 2</b><ul><li>test 1</li><li>test 2</li></ul></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#">Info 3</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 3</b><ul><li>test 1</li><li>test 2</li></ul></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#">(Info 4)</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 4</b><ul><li>test 1</li><li>test 2</li></ul></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

没有 ID 的内联 CSS 悬停时的工具提示

Tooltip on hover with inline CSS without ID

html

javascript

css

tooltip

nextsibling