如何为 Div 元素创建具有淡入/淡出效果的动态工具提示？-css教程-PHP中文网

如何为 Div 元素创建具有淡入/淡出效果的动态工具提示？

Linda Hamilton

发布： 2024-12-18 18:30:17

原创

662 人浏览过

How to Create a Dynamic Tooltip with Fade-in/Fade-out Effects for a Div Element?

向 div 元素添加动态工具提示

问题：

考虑一个带有标签和输入字段的 div 元素：

<div>
  <label>Name</label>
  <input type="text"/>
</div>

登录后复制

如何创建当用户将鼠标悬停在 div 元素上时出现的工具提示，并带有微妙的提示淡入/淡出效果？

答案：

对于显示静态消息的基本工具提示，您可以使用 title 属性：

<div title="This is my tooltip">

登录后复制

但是，对于具有动态文本和动画淡入淡出效果的工具提示，需要更高级的方法：

创建 CSS 动画
添加一个 JS 事件监听器来处理悬停事件。
创建一个工具提示 DOM 元素并将其相对于 div 定位。
添加/删除通过在悬停/移除悬停时应用 CSS 动画来显示工具提示。

这里是一个使用 JavaScript 和CSS：

.tooltip {
  display: none;
  position: absolute;
  padding: 10px;
  color: white;
  border: 1px solid black;
  opacity: 0;
  transition: all 0.2s;
}

.tooltip.show {
  display: block;
  opacity: 1;
}

登录后复制

// Create a tooltip element
const tooltip = document.createElement('span');
tooltip.classList.add('tooltip');

// Add the event listener to the div
const div = document.querySelector('div');
div.addEventListener('mouseover', (e) => {
  // Set the tooltip text
  tooltip.textContent = 'This is my tooltip';

  // Position the tooltip
  tooltip.style.left = e.x + 'px';
  tooltip.style.top = e.y + 'px';

  // Add the tooltip to the body
  document.body.appendChild(tooltip);

  // Add the show class to the tooltip
  tooltip.classList.add('show');
});

div.addEventListener('mouseout', () => {
  // Remove the tooltip from the body
  document.body.removeChild(tooltip);
});

登录后复制

以上是如何为 Div 元素创建具有淡入/淡出效果的动态工具提示？的详细内容。更多信息请关注PHP中文网其他相关文章！