Tipso 轻巧的jQuery提示插件

Tipso是一款基于jQuery的Tooltip提示框插件，他提供了众多参数，如显示动画持续时间、背景颜色、文本颜色、显示位置、加载ajax内容、回调函数等等。

插件安装

在页面中引入jQuery 1.7+和tipso.js、tipso.css

<link rel="stylesheet" href="css/tipso.css">
<script src="js/tipso.js"></script>

如果需要使用CSS3动画效果需要引入 animate.css

<link rel="stylesheet" href="/css/animate.css"> 

使用方法

$('.tipso').tipso();

插件支持直接在DOM元素上标注 data-tipso 设置参数；比如 data-tipso-background="#555555"

参数

• speed：动画持续时间，默认400(毫秒)
• size：tipso气泡大小 (可选: 'tiny', 'small', 'default', 'large') ，或自己定义CSS
• background：背景颜色；默认#55b555
• titleBackground：提示标题的背景颜色；默认#333333
• color：文本颜色；默认#ffffff
• titleColor：提示的标题颜色(#FFFFFF)
• titleContent：提示的标题的内容，可以是文本，HTML或任何你想要的
• showArrow：显示/隐藏提示箭头 (true, false)
• position：显示位置；可选： 'top', 'bottom', 'left', 'right'
• width：宽度
• maxWidth：最大宽度，默认为空
• delay：延迟(200毫秒)
• hideDelay：隐藏提示延迟
• animationIn：提示显示时使用CSS3动画效果，需要引入Animate.css
• animationOut：提示隐藏时使用CSS3动画效果，需要引入Animate.css
• offsetX：水平偏移
• offsetY：垂直偏移
• tooltipHover：false
• content：内容
• ajaxContentUrl：异步加载内容
• ajaxContentBuffer：0
• contentElementId：null
• useTitle：使用 title 属性值作为内容
• templateEngineFunc：内容支持模板引擎编译
• onBeforeShow：执行前的回调函数
• onShow：显示前的回调函数
• onHide：显示后的回调函数