开发者

How to programatically show jquery qtip tooltips as error notifiers

I need to programatically show qtip tooltips as error notifiers in a form I am working on. The form submits via ajax, and returns an object with an action, and if there are error an array of field names with error text to be show.

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({
 开发者_C百科     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");
  }
}

Above is the relevant chuck of code - stepping through it, it all seems to be fine, but I can't get the tooltips to fire up and show on the page. Has anyone had success doing this or is there anything obvious I am doing wrong?


As you point out in the comments, one problem is that you need to make sure your key variable is a valid jQuery selector for the q-tip API call jQuery(key).qtip("show"); to work.

Your other problem (mouseover pop-ups) might be related to your show options:

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

when: false will mean q-tip will wait for your .qtip("show"); call, so that should work OK.
But ready : true will make the q-tip show as soon as the DOM is ready, which then makes your API call to "show" redundant.

Try it with:

show : {
    when : false 
}

And see if thats any better.

You might also need:

hide: {
     when: false
}

... to prevent the tooltips from disappearing when you mouseout of the linked elements. (You might then also need some other way for the user to hide the tooltips)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜