js-css-tooltip是一款使用js和css3制作的tooltip工具提示插件。该tooltip插件显示时带css3动画特效,并且会自动根据元素所在的位置来定位工具提示的位置。

使用方法

在页面中引入tooltip.min.css和tooltip.min.js文件。

<link rel="stylesheet" type="text/css" href="css/tooltip.min.css">
<script src="js/tooltip.min.js" type="text/javascript"></script>                  
                
HTML结构

使用一个空的<div>元素来作为tooltip的容器。

<div class="tooltip-container no-display"></div>
                

要创建一个tooltip效果,可以为你的元素添加data-tooltip属性,该属性中的值为tooltip要显示的内容。

<span data-tooltip="My tooltip text">Show my tooltip</span>
                

js-css-tooltip工具提示插件的github地址为:https://github.com/mirelvt/js-css-tooltip