时间戳

首页 > 解决方案 > 工具提示和 CSS 过渡

css - 工具提示和 CSS 过渡

问题描述

当鼠标悬停在工具提示上时，我希望工具提示文本过渡，但是我不希望当鼠标悬停在工具提示文本本身所在的空间上时出现工具提示文本。

如果禁用“可见性：隐藏”，则过渡是平滑的，但工具提示文本所在的空间变为可交互的。如果“可见性：隐藏”完好无损，则过渡执行效果不佳。我希望过渡能够在没有响应悬停的工具提示文本所在的空间的情况下工作。

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

.tooltip .tooltiptext {
  /* visibility: hidden; */
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  opacity: 0;
  transition: opacity .25s;

  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 0.99;
}
</style>
<body style="text-align:center;">

<div class="tooltip">Hover text
  <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>

标签： csscss-transitions

解决方案

只需添加pointer-events: none;到您的工具提示元素。

我强烈建议您data-attr改用，并为工具提示创建一个伪元素 ( ::before)。更少的 HTML 代码。

body {
  text-align: center;
}

*[data-tooltip] {
  position: relative;
  inline-block;
}


*[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 120px;
  border-radius: 6px;
  padding: 5px 0;
  
  text-align: center;
  background-color: black;
  color: #fff;
   
  opacity: 0;
  transition: opacity .25s;
  z-index: 1;
  
  pointer-events: none;
}

*[data-tooltip]:hover::before {
  opacity: 0.99;
}
<div data-tooltip="Tooltip text">Hover text</div>

推荐阅读