HTML:
<body>
<div style="width:200px;height:200px;border:solid 1px red;position:relative;left:400px;" id="tip" >
<a href="http://www.baidu.com" id="test01" target="_blank">test</a>
</div>
<br>
<div class="fc-event-inner">
<input type="text" id="name" class="clickable"><br>
<div id="divname"></div>
<input type="button" id="checkname" value="checkname" οnclick="docheck();" class="clickable"><br>
</div>
</body>
JavaScript:
$("#test01").qtip({
content:{
text: "lalallalla",
title: {
text: false
}
},
style: {
classes: 'qtip-red qtip-shadow qtip-rounded',
width:'80px',
height:'100px'
}
});
window.docheck=function(persistent){
var tooltip=$("#divname").qtip({
content: {
text: '',
title: {
text: 'warning',
button: false
}
},
position: {
target: $("#name")
},
show: {
event: false,
ready: true,
effect: //false
function() {
$(this).stop(0, 1).animate({ height: 'toggle' }, 400, 'swing');
$(this).slideDown(800);
$(this).fadeOut(1500);
$(this).hide(3000);
},
delay: 0,
persistent: persistent
},
hide: {
event: false,
effect: function(api) {
$(this).stop(0, 1).animate({ height: 'toggle' }, 400, 'swing');
}
},
style: {
classes: 'qtip-orange qtip-shadow qtip-rounded',
width:'120px',
height:'80px',
tip:false
/*{
corner: true,
mimic: false,
width: 8,
height: 8,
border: true,
offset: 0
}*/
}
});
var api=tooltip.qtip('api');
if($("#name").val()==""){
api.set('content.text', 'not null!');
}else if($("#name").val()=="aa"){
api.disable(true);
//$("#divname").qtip('disable');
}else{
api.set({
'style.height':'10px',
'content.text': 'else!',
'show.effect': 'false',
'content.title.button':"x",
'hide.effect':function(api) {
$(this).stop(0, 1).animate({ height: 'toggle' }, 400, 'swing');
alert("close!");
}
});
}
}
效果如图所示。当鼠标放置在test链接上时会出现提示。点击checkname按钮时,当文本框中没有输入任何内容时会弹出警告提示:“not null!”,当文本框中输入“aa”时会弹出空内容的提示,当输入其他值时弹出“else!”提示。
希望当在文本框中输入"aa"时不弹出任何提示,但是没有出现预期效果。希望第二个点击按钮出现的气泡提示也跟第一个a链接似的出现tip,虽然可以出现但是会有一个延时,感觉上效果不好,不知道这个怎么搞。求大神指教!
qTip2是一个功能非常强大的气泡提示插件,支持IE6+等。
qTip2在IE6、IE7、IE8下有圆角样式问题(设置圆角样式但未出现预期结果),该问题在网上有很多解决办法就不在这里一一赘述了。
另,qtip2官网:http://qtip2.com/