向 div 添加工具提示

javascript html css tooltip

2022-08-29 22:36:11

我有一个像这样的div标签：

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

如何在div上显示工具提示，最好具有淡入/淡出效果。:hover

答案 1

对于基本工具提示，您需要：

<div title="This is my tooltip">

喜欢：

.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

<div title="This is my tooltip" class="visible"></div>

对于更花哨的javascript版本，您可以查看：

https://jqueryhouse.com/best-jquery-tooltip-plugins/

上面的链接为您提供了 25 个工具提示选项。

答案 2

它只能用CSS完成，根本没有javascript

运行演示

[data-tooltip]:before {
    /* needed - do not touch */
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;
    
    /* customizable */
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

[data-tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;
    
    /* customizable */
    background: yellow;
    margin-top: -50px;
    margin-left: 20px;    
}

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

/* FOR TEST PURPOSES ONLY */
div {
    border: 1px solid silver;
    background: #ddd;
    margin: 20px;
    padding: 10px;
}

<div>Standard div, no tooltip here</div>


<div data-tooltip="Hi, I'm a tooltip. Pretty easy uh ? ;)">Div with standard tooltip. Hover me to see the tooltip.
    <br/>Hovering the tooltip doesn't matter:
    <br/>if you hover out of my boundaries, the tooltip will disappear.</div>


<div data-tooltip="Hi, I'm a persistent tooltip. I won't disappear when hovering me even if out of my parent boundaries. I'll also prevent other tooltips to fire :)" data-tooltip-persistent="foo">Div with persistent tooltip. Hover me to see the tooltip.
    <br/>The tooltip won't expire until you hover on me OR it.</div>

应用自定义HTML属性，例如。到您的对象（div 或其他）：data-tooltip="bla bla"
```
 <div data-tooltip="bla bla">
     something here
 </div>
```
将每个对象的伪元素定义为透明，绝对定位并具有作为内容的价值：:before[data-tooltip]data-tooltip=""
```
 [data-tooltip]:before {            
     position : absolute;
      content : attr(data-tooltip);
      opacity : 0;
 }
```
定义每个的悬停状态以使其可见：:hover:before[data-tooltip]
```
 [data-tooltip]:hover:before {        
     opacity : 1;
 }
```
将您的样式（颜色，大小，位置等）应用于工具提示对象;故事结束。

在演示中，我定义了另一个规则，用于指定工具提示在将鼠标悬停在工具提示上时是否必须消失，但必须消失在父级之外，并带有另一个自定义属性和一个简单的规则：data-tooltip-persistent

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

注1：浏览器对此的覆盖范围非常广泛，但请考虑对旧IE使用javascript回退（如果需要）。

注意2：增强功能可能是添加一些javascript来计算鼠标位置并将其添加到伪元素中，方法是更改应用于它的类。