Как программно показать подсказки jquery qtip в качестве уведомителей об ошибках - PullRequest
2 голосов
/ 27 августа 2010

Мне нужно программно показывать подсказки 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 Ответ

2 голосов
/ 05 октября 2011

Как вы указали в комментариях, одна проблема заключается в том, что вам нужно убедиться, что ваша переменная key является допустимым селектором jQuery для вызова API q-tip jQuery(key).qtip("show"); для работы.

Ваша другая проблема (всплывающие окна при наведении курсора мыши) может быть связана с параметрами вашего шоу:

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

when: false будет означать, что q-tip будет ждать вашего звонка .qtip("show");, поэтому все должно работать нормально.
Но ready : true заставит q-tip показывать, как только DOM будет готов, что сделает ваш вызов API "show" избыточным.

Попробуйте это с:

show : {
    when : false 
}

И посмотри, будет ли это лучше.

Вам также может понадобиться:

hide: {
     when: false
}

... для предотвращения исчезновения подсказок при наведении мыши на связанные элементы. (Тогда вам также может понадобиться другой способ скрыть подсказки)

...