https://github.com/tianxiangbing/tip
提示组件
https://github.com/tianxiangbing/tip
hover jquery tips title
Last synced: about 1 month ago
JSON representation
提示组件
- Host: GitHub
- URL: https://github.com/tianxiangbing/tip
- Owner: tianxiangbing
- Created: 2015-06-12T09:19:52.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2021-05-17T03:35:49.000Z (about 5 years ago)
- Last Synced: 2025-09-23T19:36:33.963Z (8 months ago)
- Topics: hover, jquery, tips, title
- Language: JavaScript
- Homepage: http://tianxiangbing.github.io/tip/example/
- Size: 504 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tip
jquery提示组件,动态内容tip,右键菜单tip提示
效果如下图:
**[DEMO请案例点击这里查看.](http://tianxiangbing.github.io/tip/example/ "tip demo")**
----------
```
npm install jq-tip --save
```
# 调用示例
文本提示：
var tip = new Tip();
tip.init({
trigger: '#btn-tip-right',
width:100,
triggerEvent:'hover',
content: 'loading...',
ajax: function() {
var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd) {
var tasks = function() {
console.log("执行完毕！");
dtd.resolve("这是提示信息啊这是提示信息啊这是提示信息啊这是提示信息啊这是提示信息啊这是提示信息啊"); // 改变deferred对象的执行状态
};
setTimeout(tasks, 1000);
return dtd;
};
wait(dtd);
return dtd;
}
});
var tip_left= new Tip();
tip_left.init({
trigger:'#btn-tip-left',
triggerEvent:'click',
width:100,
content: '这是提示信息啊这这是提示信息啊这是提示信息啊这是提示信息啊是提示信息啊这是提示信息啊',
position:'left|bottom'
});
var tip_top= new Tip();
tip_top.init({
trigger:'#btn-tip-top',
triggerEvent:'click',
content: '这是提示信息啊',
position:'top|left'
});
var tip_bottom= new Tip();
tip_bottom.init({
trigger:'#btn-tip-bottom',
triggerEvent:'click',
content: '这是提示信息啊',
position:'bottom|left'
});
var tip_auto= new Tip();
tip_auto.init({
trigger:'#btn-tip-auto',
triggerEvent:'click',
width:100,
position:'right|center',
content: '这是提示信息啊这这是提示信息啊这是提示信息啊这是提示信息啊是提示信息啊这是提示信息啊',
inViewport:true
});
var t = $('#txt-tip').Tip({
content:$('#txt-tip').attr('msg'),
triggerEvent:'focus'
})[0];
$('#table :button').each(function() {
var obj = this;
var t = new Tip();
t.init({
trigger: obj,
triggerEvent: 'hover',
width: 150,
position: $(obj).data('position'),
content: '这是提示信息啊这这是提示信息啊这是提示信息啊这是提示信息啊是提示信息啊这是提示信息啊',
inViewport: true,
beforeShow:function(){
$('.ui-tip').trigger('hide');
}
});
});
//rightMouseTarget有值时，触发鼠标右键菜单事件。 this.settings.trigger为当前的dom对象。方便动态内容时使用.
var tipajax = new Tip();
tipajax.init({
trigger: '#btn-tip-ajax',
delegate:document,
triggerEvent:'click',
position:'bottom|left',
content: ' ',
offset:{x:-10,y:0},
rightMouseTarget:'body',
ajax: function(target) {
var dtd = $.Deferred(); // 新建一个deferred对象
setTimeout(()=>{
let $html="<div>abcdefg"+$(target).val()+"</div>"
dtd.resolve($html);
});
return dtd;
}
})
//使用content函数来动态设置内容，或者在callback中使用setContent设置内容
var tipaAni = new Tip();
tipaAni.init({
trigger: '#btn-tip-anim',
delegate:document,
triggerEvent:'click',
position:'bottom|left',
rightMouseTarget:'body',
content: function(target){
let $html="<div>abcdefg"+$(target).val()+"</div>"
return $html;
},
offset:{x:-10,y:0},
rightMouseTarget:'body'
})
# API
## 属性
### trigger:`[$|dom|string]`
触发元素,jquery对象或dom或string,当delegate不为空时，trigger只支持string.
### triggerEvent: `[click|hover|focus]`
触发事件，默认为hover,事件都委托在delegate参数上，focus不委托
### delegate:`[dom|string]`
事件的委托节点,默认无委托,focus无效.
### tpl:`[string]`
html模板，默认
### offset:`{x:0,y:0}`
偏移量,默认x:0,y:0
### width:`[number]`
宽
### height:`[number]`
高
### zIndex:`999`
z-index
### content:[string|$]
提示内容，这里可以是string或节点，因为内部是调用的$().html方法,动态设置请调setContent方法
### inViewport:`bool`
是否自适合窗口位置,默认false
### position:`['right'|'left'|'top'|'bottom']`
显示位置，默认'right
### ajax:`function`
返回一个promise,参数为promise之后的内容如下：
ajax: function() {
var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd) {
var tasks = function() {
console.log("执行完毕！");
dtd.resolve("这是提示信息啊"); // 改变deferred对象的执行状态
};
setTimeout(tasks, 1000);
return dtd;
};
wait(dtd);
return dtd;
}
## 方法
### setContent:`function(content)`
设置提示内容
### stop:`function()`
停止显示
### start:`function`
开始显示
## 事件或回调
### callback:`function`
显示后的回调
### hide:`event`
tip的hide事件，
### beforeShow:`function`
显示前的回调
### afterHide:`function`
隐藏后的回调