Показать всплывающую подсказку JqueryUI, основанную на проверке парсеры

Question

У меня возникли проблемы с получением виджета JQueryUI Tooltip Widget, работающего с проверкой парсля. Это мой код:

$.listen('parsley:field:error', function (fieldInstance) { 
     var messages = ParsleyUI.getErrorsMessages(fieldInstance); 

     if(fieldInstance.$element.tooltip('instance') != undefined) { 
      fieldInstance.$element.tooltip('destroy'); 
     } 

     fieldInstance.$element.tooltip({ 
      items: fieldInstance.$element, 
      content: messages, 
      show: 'pulsate' 
     }); 

     fieldInstance.$element.tooltip('show'); 
    }); 

Мой methology является:

1. Check if a tooltip exists (as multiple validation occur), if it does destroy it.
2. Create the tooltip with the appropriate message
3. Show the tooltip

Но я просто получаю ошибку CONSOL:

Uncaught Error: no such method 'show' for tooltip widget instance

Кроме того, если кто-то думает, что есть лучший способ сделать это пожалуйста, не стесняйтесь ответить!

Answer 1

У вас есть несколько вопросов, с кодом:

1. Основная проблема заключается в том, что вы звоните .tooltip('show'); но нет такого метода или событий, в соответствии с API documentation. Вы должны использовать .tooltip('open').
2. Опция contentaccepts a function or string, и вы передаете массив. Вы должны взрываться в messages массив с чем-то вроде messages.join('<br />')
3. Для того, чтобы показать ошибки только в подсказке, вам необходимо изменить параметры по умолчанию parlsey, специально errorsContainer и errorsWrapper.

Ваш окончательный код будет что-то вроде этого (тест в this jsfiddle):

$(document).ready(function() { 
    $("#myForm").parsley({ 
     errorsContainer: function (ParsleyField) { 
      return ParsleyField.$element.attr("title"); 
     }, 
     errorsWrapper: false 
    }); 

    $.listen('parsley:field:error', function (fieldInstance) { 
     var messages = ParsleyUI.getErrorsMessages(fieldInstance); 

     if(fieldInstance.$element.tooltip('instance') != undefined) { 
      fieldInstance.$element.tooltip('destroy'); 
     } 

     fieldInstance.$element.tooltip({ 
      content: messages.join('<br />'), 
      items: fieldInstance.$element, 
      show: 'pulsate' 
     }); 

     fieldInstance.$element.tooltip('open'); 
    }); 
});