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