双层tooltip js

双层tooltip是一种常见的JavaScript技术，用于在网页中创建具有多个层级的工具提示。它可以在用户将鼠标悬停在某个元素上时显示一个浮动的信息框，通常用于提供更详细的说明或额外的内容。

实现双层tooltip的方法有很多种，下面是一种简单的实现方式：

首先，在HTML中创建一个包含两个层级的元素，例如一个父元素和一个子元素。父元素用于触发tooltip的显示，子元素用于显示tooltip的内容。

<div class="tooltip">
  <span class="trigger">Hover me</span>
  <div class="tooltip-content">Tooltip content</div>
</div>

接下来，使用CSS样式来定义tooltip的外观和位置：

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltip-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f9f9f9;
  padding: 5px;
  border: 1px solid #ccc;
}

.tooltip:hover .tooltip-content {
  display: block;
}

最后，使用JavaScript来处理鼠标事件，以实现tooltip的显示和隐藏：

const tooltipTrigger = document.querySelector('.trigger');
const tooltipContent = document.querySelector('.tooltip-content');

tooltipTrigger.addEventListener('mouseover', () => {
  tooltipContent.style.display = 'block';
});

tooltipTrigger.addEventListener('mouseout', () => {
  tooltipContent.style.display = 'none';
});

这样，当鼠标悬停在触发元素上时，tooltip内容会显示出来；当鼠标移出触发元素时，tooltip内容会隐藏起来。

这只是一种简单的实现方式，你可以根据自己的需求进行修改和扩展。另外，还有很多现成的JavaScript库和框架可以帮助你更方便地实现双层tooltip效果，例如Bootstrap、jQuery等。