bootstrap tooltip动态改变title的坑

最近接手的项目,其中有一个页面输入框的提示原本是弹窗提示,但是测试人员说这样不方便,每次提醒完了还要去点击确定才能关闭,

如果改成弹窗几秒自动关闭又担心用户没看见,总的来说就是要搞事情,最后决定改成气泡浮层的方式提醒,这样既可以不影响用户体验也不影响

页面原本的显示效果。好吧,说正事。效果如下:


这个项目里面使用了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,还是没达到理想效果。

由于能力有限,未能找到解决方法,欢迎指点。

你可能感兴趣的:(bootstrap tooltip动态改变title的坑)