Tipso – 轻巧的jQuery提示框插件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Tipso – 轻巧的jQuery提示框插件相关的知识,希望对你有一定的参考价值。
Tooltip(提示框)是一种常见的效果,它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难,但如果你想不劳而获,可以试试 Tipso。
Tipso 基于 jQuery,提供了很多配置,如:
- 显示动画持续时间
- 背景颜色
- 文本颜色
- 显示位置(上/右/下/左)
- 宽度
- 偏移
- 加载 ajax 内容
- 回调函数
使用方法
1、引入文件
<link rel="stylesheet" href="css/tipso.css"> <script src="js/jquery.js"></script> <script src="js/tipso.js"></script>
2、html
<span id="tip" data-tipso="dowebok">Tipso</span>
或者:
<span id="tip" title="内容来自 title 属性">Tipso</span>
使用属性 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 | 显示后的回调函数 |
以上是关于Tipso – 轻巧的jQuery提示框插件的主要内容,如果未能解决你的问题,请参考以下文章
基于jquery的提示框JavaScript 插件,类Bootstrap
基于查询的插件库 - 轮播/标签页/滚动条/下拉框/对话框/搜索提示/城市三级联动/日历_一组基于jQuery的小部件