Tipso 轻巧的jQuery提示插件

Tipso 轻巧的jQuery提示插件

更新: 2015-11-15

阅读:1936

开源:GitHub

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:显示后的回调函数