给一个 div 添加提示信息

9 浏览
0 Comments

给一个 div 添加提示信息

我有一个像这样的

标签：

我该如何在

标签的:hover状态下显示一个tooltip，最好带有淡入/淡出的效果。

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

它可以完全使用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;
}


Standard div, no tooltip here
Div with standard tooltip. Hover me to see the tooltip.
    Hovering the tooltip doesn't matter:
    if you hover out of my boundaries, the tooltip will disappear.
Div with persistent tooltip. Hover me to see the tooltip.
    The tooltip won't expire until you hover on me OR it.

  1. 对您的对象（div或其他）应用自定义HTML属性，例如data-tooltip =“bla bla” ：

        something here

  2. 将每个 [data-tooltip] 对象的 :: before 伪元素定义为透明，绝对定位，并使用data-tooltip =“”值作为内容:

    [data-tooltip]::before {
    position : absolute;
    content : attr(data-tooltip);
    opacity : 0;
}

  3. 定义每个 [data-tooltip] 的 :hover :: before 悬停状态使其可见：

    [data-tooltip]:hover::before {
    opacity : 1;
}

  4. 将样式（颜色，大小，位置等）应用于工具提示对象；故事结束。
    在演示中，我定义了另一条规则，以指定当悬停在父元素之外但悬停在其上方时，工具提示是否必须消失，使用另一种自定义属性 data-tooltip-persistent 和一个简单的规则：

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

注意1：这个在浏览器中的覆盖率非常广，但考虑使用旧IE的Javascript回退（如果需要）。

注意2：可以通过添加一些Javascript来计算鼠标位置并将其添加到伪元素中，通过更改应用于其的类来进行增强。

0
0 Comments

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





就像：



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













想要更高级的 JavaScript 版本，您可以了解一下：


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


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

									

				

									

			

			
0