纯js tooltip工具提示插件

当前位置:主页 > jQuery库 > 工具提示 > 纯js tooltip工具提示插件
纯js tooltip工具提示插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:11-09
    阅读:
简要教程

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