Tooltip(提示框)是一种常见的效果,它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难,但如果你想不劳而获,可以试试 Tipso。
Tipso 基于 jQuery,提供了很多配置,如:· 显示动画持续时间
· 背景颜色
· 文本颜色
· 显示位置(上/右/下/左)
· 宽度
· 偏移
· 加载 ajax 内容
· 回调函数
使用方法
1、引入文件
2、HTMLTipso
或者:Tipso
使用属性 data-tipso 的值作为 tip 的内容是时,需要设置 useTitle: false;使用 title 属性作为 tip 的内容则设置 useTitle: true 或省略此参数。
3、JavaScript$(function() {
$('#tip').tipso({
useTitle: false
});
});
配置属性/方法类型默认值说明speed整数400动画持续时间
background字符串‘#55b555’背景颜色
color字符串‘#ffffff’文本颜色
position字符串‘top’显示位置
width整数200宽度
delay整数200延迟
offsetX整数0水平偏移
offsetY整数0垂直偏移
content字符串null内容
ajaxContentUrl字符串null异步加载内容
useTitle布尔值true使用 title 属性值作为内容
onBeforeShow函数null执行前的回调函数
onShow函数null显示前的回调函数
onHide函数null显示后的回调函数