如何将工具提示添加到div

2018-06-29 03:20:57

我有一个div标签，如下所示：

<html>
    <head></head>
    <body>
        <div>
            <label>Name</label>
            <input type="text"/>
        </div>
    </body>
</html>

现在我想要一个简单的javascript来显示工具提示：悬停div。有人可以帮我吗？工具提示还应该具有淡入/淡出效果。

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

<div title="This is my tooltip">

对于fancier的javascript版本，你可以看看：

http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632

以上链接为您提供了12个工具提示选项。

它可以用CSS完成，根本不需要JavaScript： 运行演示

应用自定义HTML属性，例如。 tooltip="bla bla"到你的对象（div或其他）：

<div tooltip="bla bla">
    something here
</div>

定义:before每个[tooltip]对象的伪元素为透明前，绝对定位并且以tooltip=""值作为内容：

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

定义:hover:before悬停每个[tooltip]以使其可见：

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

将您的样式（颜色，大小，位置等）应用到工具提示对象; 故事结局。

在演示中，我定义了另一个规则，以指定如果工具提示悬停在父级之外时，它必须消失，但具有另一个自定义属性tooltip-persistent和一条简单规则：

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

注1：浏览器覆盖范围非常广泛，但考虑为旧IE使用JavaScript后备（如果需要）。

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

你根本不需要JavaScript; 只需设置title属性：

<html><head></head>
<body>
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
</body>
</html>

请注意，工具提示的视觉呈现是依赖于浏览器/操作系统的，因此它可能会淡入，它可能不会。但是，这是提供工具提示的语义方式，它可以正常使用屏幕阅读器等辅助功能软件。

看到这个jsfiddle。

链接地址: http://www.djcxy.com/p/81351.html