最近接手的项目，其中有一个页面输入框的提示原本是弹窗提示，但是测试人员说这样不方便，每次提醒完了还要去点击确定才能关闭，
如果改成弹窗几秒自动关闭又担心用户没看见，总的来说就是要搞事情，最后决定改成气泡浮层的方式提醒，这样既可以不影响用户体验也不影响
页面原本的显示效果。好吧，说正事。效果如下：
这个项目里面使用了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，还是没达到理想效果。
由于能力有限，未能找到解决方法，欢迎指点。
网友评论