工具提示
一个简单的 j 查询工具提示插件 .
主要
dist/
├── tooltip.css (2 KB)
├── tooltip.min.css (2 KB)
├── tooltip.js (9 KB)
└── tooltip.min.js (4 KB)
开始
快开始
有三个快速启动选项:
- 下载最新版本。 。 。 .
- 清除仓库 :
git clone https://github.com/fengyuanchen/tooltip.git。 。 。 . - 安装方式 国家预防机制数字 :
npm install @fengyuanchen/tooltip。 。 。 .
安装
包含文件 :
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link href="/path/to/tooltip.css" rel="stylesheet">
<script src="/path/to/tooltip.js"></script>
使用量
初始化为 $.fn.tooltip 方法.
// With option
$('body').tooltip({
autoshow: true,
content: 'Hello, world!'
});
// With method
$('body').tooltip('show', 'Hello, world!');
// Shortcut
$('body').tooltip('Hello, world!');
选项
// Set tooltip options
$().tooltip(options);
// Change the global default options
$.fn.tooltip.setDefaults(options);
自动隐藏
- 类型 :
Boolean - 默认 :
true
超时时自动隐藏工具提示 。 需求 duration 选项待设定.
自动显示
- 类型 :
Boolean - 默认 :
true
初始化时自动显示工具提示 。 需求 content 选项待设定.
内容
- 类型 :
String - 默认 :
''
工具提示内容
倒计时
- 类型 :
Boolean - 默认 :
false
显示倒计时视图 。 需求 duration 选项待设定.
可驳回
- 类型 :
Boolean - 默认 :
false
允许在工具提示自动关闭前点击所附带的关闭按钮,以删除该提示.
会期
- 类型 :
Number - 默认 :
3000
定义工具提示显示的时间( 默认为3秒) .
已固定
- 类型 :
Boolean - 默认 :
true
修正工具提示( 仅可用于 body 页:1.
页:1
- 类型 :
Number - 默认 :
10
将工具提示从其父中抵消 .
职位
- 类型 :
String - 默认 :
'center top' - 选项 :
'left top', (中文(简体) ),'center top', (中文(简体) ),'right top', (中文(简体) ),'left middle', (中文(简体) ),'center middle', (中文(简体) ),'right middle', (中文(简体) ),'left bottom', (中文(简体) ),'center bottom', (中文(简体) ),'right bottom'
工具提示的位置(水平和垂直)
样式
- 类型 :
String - 默认 :
'default' - 选项 :
'default', (中文(简体) ),'primary', (中文(简体) ),'success', (中文(简体) ),'info', (中文(简体) ),'warning', (中文(简体) ),'danger'
工具提示的样式
zindex 数据
- 类型 :
Number - 默认 :
1024
工具提示的Z指数.
方法
$().tooltip('method', argument1, , argument2, ..., argumentN)
显示([内容[,选项]]])
用新内容显示工具提示 .
$().tooltip('show', 'Hello, world!');
$().tooltip('show', 'Hello, world!', 'primary');
$().tooltip('show', 'Hello, world!', {
style: 'primary',
zIndex: 2048
});
快捷键 : $().tooltip(content, options)
- 仅限
show方法 - 第一个参数必须是字符串(不是方法之一)
$().tooltip('Hello, world!', 'primary');
隐藏( c)
隐藏工具提示 .
销毁()
摧毁工具提示.
活动
显示.工具提示
这个事件在 show 使用实例方法.
显示. tabletip
当工具提示被显示给用户时(将等待 CSS 转换完成),此事件会被点燃.
隐藏. 工具提示
当隐藏实例方法被调用时,此事件立即被发射.
隐藏. 工具提示
当工具提示从用户处被隐藏完成时( 将等待 CSS 转换完成) , 此事件会被启动 .
无冲突
如果您需要使用同一命名空间的其他插件, 请打电话到 $.fn.tooltip.noConflict 重新使用的方法.
<script src="other-plugin.js"></script>
<script src="tooltip.js"></script>
<script>
$.fn.tooltip.noConflict();
// Code that uses other plugin's "$().tooltip" can follow here.
</script>
浏览器支持
- 铬(最新2份)
- 火狐(最新2个)
- 互联网探索者 8+
- 歌剧院(最新2个)
- 萨法里(最新2份)
作为 jQuery 插件,您还需要查看 j 查询浏览器支持。 。 。 .
许可证
释放 麻省理工学院 执照.