对话框/Tips
HTML5 tooltips工具提示jquery插件
PetitQ
tooltip.js 是一款 HTML5 tooltips 工具提示 jquery 插件。tooltip.js 可以通过 js 或 html5 data 属性来实例化一个 tooltip。它的特点还有：
可以自定义 tooltip 动画
也想出现在这里？联系我们吧
内置暗色和亮色两种主题
可以自定义文字和阴影的颜色等属性
允许动态的改变 tooltip 的内容
允许在没有用户交互的情况下显示 tooltip
使用方法：
在页面中引入 jquery 和 tooltip.js 文件，以及样式文件 tooltip.css。
<script src='js/jquery.min.js'></script>
<script src='js/tooltip.js'></script>
<link rel="stylesheet" href="css/tooltip.css" type="text/css" />
通过 js 来初始化 tooltip，第一种使用 tooltip.js 插件的方法是通过 js 来初始化 tooltip。例如：
<span id="my-element">Hover Me</span>
$(document).ready(function(){
$('#my-element').tooltip({
// 配置参数});
});
通过 data 属性来初始化 tooltip 第二种方法是通过 HTML data 属性和 class 来初始化 tooltip。例如：首先定义全局的 tooltip 属性：
$(document).ready(function(){
ToolTip.init({
delay: 400,
fadeDuration: 250,
fontSize: '1.0em',
theme: 'light',
textColor: '#757575',
shadowColor: '#000',
fontFamily: "'Roboto-Medium', 'Roboto-Regular', Arial"
});
});
然后通过 data-tip 属性和 tip-hotspotclass 来定义一个 tooltip。
<button class="tip-hotspot" data-tip="This is the tooltip text">Button text here</button>
配置参数:
使用第一种通过 js 来初始化 tooltip 的方法时，可以使用下面的配置参数：
| 参数 | 是否必须 | 描述 |
| text | 是 | tooltip 上显示的内容。 |
| delay | 否 | tooltip 显示的延迟时间。默认为 0。 |
| fadeDuration | 否 | 淡出的持续时间，单位毫秒，默认为 250 毫秒。 |
| fontSize | 否 | tooltip 的字体大小，默认为 1em。 |
| theme | 否 | tooltip 的主题。可选有'dark'和'light'。 |
| textColor | 否 | 文字的颜色。 |
| shadowColor | 否 | 阴影的颜色。 |
| fontFamily | 否 | 字体族。默认为'Arial, Helvetica, sans-serif'。 |
示例：
$(document).ready(function(){
$('#my-element').tooltip({text: '这是一个tooltip'});
});
带参数的 tooltip：
$(document).ready(function(){
$('#my-element').tooltip({
text: '这是一个tooltip',
fontSize: '14px',
theme: 'light',
fontFamily: "'Roboto-Medium', 'Roboto-Regular', Arial",
delay: 400
});
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
