tooltip的2种写法，一种纯css,一种 js

**标题与描述解析** 标题和描述提到了"tooltip"，这是一个在网页开发中常见的功能，用于显示当鼠标悬停在某个元素上时的提示信息。这里提到的两种实现方法是纯CSS和JavaScript（js）。 **纯CSS实现Tooltip** 纯CSS实现Tooltip主要依赖于伪元素（`:before` 和 `:after`）以及`hover`选择器。我们需要在HTML中为需要添加Tooltip的元素添加一个数据属性，比如`data-tooltip`，然后在CSS中选择这个属性并创建对应的提示文本。 ```html <div class="tooltip" data-tooltip="这是个提示信息"></div> ``` CSS代码如下： ```css .tooltip { position: relative; display: inline-block; /* 使得元素可以包含内容 */ } .tooltip::before, .tooltip::after { position: absolute; visibility: hidden; opacity: 0; transition: opacity 0.3s, transform 0.3s; } .tooltip:hover::before, .tooltip:hover::after { visibility: visible; opacity: 1; } .tooltip::before { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; bottom: -5px; left: 50%; transform: translateX(-50%); } .tooltip::after { content: attr(data-tooltip); background-color: black; color: white; padding: 5px 10px; border-radius: 5px; white-space: nowrap; top: 100%; left: 50%; transform: translateX(-50%); } ``` 这段CSS代码创建了一个简单的Tooltip，当鼠标悬停在元素上时，会显示一个黑色背景、白色文字的提示框，箭头指向元素。 **JavaScript实现Tooltip** JavaScript实现Tooltip通常更为灵活，可以实现更复杂的交互和动态内容。我们可以监听元素的`mouseover`和`mouseout`事件，显示和隐藏Tooltip。以下是一个基本的JavaScript实现： ```html <div id="tooltipElement" title="这是个提示信息">悬停我</div> <script> const tooltipElement = document.getElementById('tooltipElement'); tooltipElement.addEventListener('mouseover', function() { const tooltip = document.createElement('div'); tooltip.className = 'tooltip'; tooltip.textContent = this.title; document.body.appendChild(tooltip); setTimeout(() => { tooltip.style.opacity = 1; }, 100); }); tooltipElement.addEventListener('mouseout', function() { const tooltip = document.querySelector('.tooltip'); tooltip.style.opacity = 0; setTimeout(() => { tooltip.remove(); }, 300); }); </script> ``` 在这个例子中，当鼠标悬停在元素上时，我们创建一个新的`div`作为Tooltip，并设置其内容为元素的`title`属性值。在鼠标离开时，我们逐渐透明化Tooltip并最终移除它。 **总结** 两种方法各有优缺点。纯CSS实现简单且无额外的JavaScript开销，但可能不够灵活。JavaScript实现则能提供更多的自定义功能，如动画效果、动态内容等，但可能会增加页面加载时间和内存占用。开发者应根据项目需求和性能考虑选择合适的方法。在实际开发中，还可以结合使用库或框架（如jQuery、Vue、React等）来更方便地实现Tooltip功能。