最近接手的项目,其中有一个页面输入框的提示原本是弹窗提示,但是测试人员说这样不方便,每次提醒完了还要去点击确定才能关闭,
如果改成弹窗几秒自动关闭又担心用户没看见,总的来说就是要搞事情,最后决定改成气泡浮层的方式提醒,这样既可以不影响用户体验也不影响
页面原本的显示效果。好吧,说正事。效果如下:
这个项目里面使用了bootstrap,所以我就采用了tooltip,先大概了解一下tooltip的基本用法:
http://www.runoob.com/bootstrap/bootstrap-tooltip-plugin.html,这里面也提供了在线编辑查看效果的链接,这个要自己根据需求看看
但是需求规定了提示文字不是固定的,而是会根据其他输入框的值来限制某个输入框可输入的范围,这样一来提示内容就没法固定,
一开始我是这样写的:
var msg = '提示内容111'; //会根据实际情况改变
if(显示提示框的条件){
$(obj).attr("title" , msg).tooltip('show').focus();
}else{
$(obj).tooltip('destroy'); //不满足时销毁
}
但是后来发现一个问题,如果连续都需要执行if里面的代码,也就是说还没有执行 $(obj).tooltip('destroy'); 销毁原来的tip,有增加了一条新的,就会出现有两条tip重叠的问题,按照正常的逻辑,可以在下一条提示之前先销毁再提示新的,于是将代码改成:
var msg = '提示内容111'; //会根据实际情况改变
if(显示提示框的条件){
$(obj).tooltip('destroy'); //先执行销毁
$(obj).attr("title" , msg).tooltip('show').focus();
}else{
$(obj).tooltip('destroy'); //不满足时销毁
}
这样一来情况就变成了,不管什么提醒都没有了(这个原因至今未解决,不知道我的代码是不是有什么问题),然后我就改成了以下版本,也是我现在采用的:
var msg = '提示内容111'; //会根据实际情况改变
if(显示提示框的条件){
$(obj).tooltip('destroy'); //先执行销毁
$(obj).attr("title" , msg).tooltip('fixTitle').tooltip('show'); //多加了tooltip('fixTitle')
}else{
$(obj).tooltip('destroy'); //不满足时销毁
}
最后说一下不足的地方,
1、不能使用$(obj).attr("title" , msg).tooltip('fixTitle').tooltip('show').focus(),这里的focus没有效果。
2、如果tooltip是针对鼠标hover提示,所以未能达到准确的控制show跟hide,比如鼠标移走就会hide,但这时候可能还想提示给用户看,就未能如愿,也尝试用了trigger,还是没达到理想效果。
由于能力有限,未能找到解决方法,欢迎指点。