如何以编程方式将jquery qtip工具提示显示为错误通知程序

时间:2010-08-27 13:11:13

标签: jquery tooltip

我需要以我正在处理的形式以编程方式将qtip工具提示显示为错误通知程序。表单通过ajax提交,并返回一个带有动作的对象,如果有错误,则显示一个带有错误文本的字段名称数组。

if (response.action == 'error') {
  // We would put tooltip on appropriate items here
  for (var key in response.text){
    //alert( "Key: " + key + " Value: " + response.text[key] );
    jQuery(key).qtip({
      content: {
        text: response.text[key],
        prerender: true
      },
      style: {
        theme: 'red',
        tip : {corner : "bottomLeft", size : { x : 12, y : 12 }}
      },
      position : {
        corner : {
          target : "topRight", 
          tooltip : "bottomLeft"
        }
      },
      show : {
        ready : true, // show when created on orderError call
        when : false // never show unless explicitly called
      }

    });
  jQuery(key).qtip("show");
  }
}

以上是代码的相关信息 - 单步执行它,一切似乎都没问题,但我无法启动工具提示以启动并显示在页面上。有没有人做过这样的成功,或者有什么明显的我做错了吗?

1 个答案:

答案 0 :(得分:2)

正如您在评论中指出的那样,一个问题是您需要确保key变量是q-tip API调用jQuery(key).qtip("show");的有效jQuery选择器才能生效。

您的其他问题(鼠标悬停弹出式窗口)可能与您的节目选项有关:

show : {
    ready : true, // show when created on orderError call
    when : false // never show unless explicitly called
}

when: false将意味着q-tip将等待您的.qtip("show");来电,因此应该可以正常工作。
ready : true会在DOM准备好后立即显示q-tip,然后让您的API调用“显示”多余。

尝试使用:

show : {
    when : false 
}

看看那是否更好。

您可能还需要:

hide: {
     when: false
}

...以防止在鼠标移出链接元素时工具提示消失。 (您可能还需要一些其他方式让用户隐藏工具提示)