показывает один всплывающий подсказок, когда запускаются разные события разных целей? - PullRequest
Новая
       19

показывает один всплывающий подсказок, когда запускаются разные события разных целей?

2 голосов
/ 20 декабря 2010

У меня есть несколько элементов ввода и выбора в моей форме, чтобы перед каждым из них был небольшой значок со знаком вопроса, который будет показывать подсказку, когда мышь находится над этим gif с помощью превосходного jquery jquery.qtip-1.0. Плагин 0-rc3.js (с jquery-1.3.2.min.js) выглядит так: 

   $('#questionmark1').qtip({
        content: 'sample help content'
        , style: { name: 'sampleStyle' }
        , position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }         
    });

Я также хочу показать всплывающую подсказку, когда соответствующее поле ввода будет сфокусировано, и скрыть, когда оно размыто. следующий делает трюк, но не показывает подсказку, когда мышь находится над этим gif 

  $('#questionmark1').qtip({
        content: 'sample help content'
        , style: { name: 'sampleStyle' }
        , position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }         
         , show: { when: { target: $('#input1'), event: 'focus'} }
        , hide: { when: { target: $('#input1'), event: 'blur'} }
    });

но проблема в том, что что-то вроде не работает. 

  show: { when: { target: $('#input1'), event: 'focus'},
                { target: $('#questionmark1'), event: 'focus'} }

Короче говоря, первые два блока кода работают нормально, и я могу добавить оба, чтобы достичь своей цели, но я хочу сделать это правильно.
Как я могу нацелить события нескольких целей для показа одной подсказки?

1 Ответ

3 голосов
/ 03 января 2011

Вам не нужно подключать все события показа / скрытия внутри звонка к qtip(). Я бы определил событие mouseover как событие, которое запускает qtip по умолчанию: 

$('#questionmark1').qtip({
      content: {text:'sample help content', prerender: true}
      , style: { name: 'sampleStyle' }
      , position: { corner: { target: 'bottomLeft', tooltip: 'rightTop'} }         
      , show: { when: 'mouseover' }
  });

(обратите внимание на добавленную мной опцию prerender)

А затем вручную определите обработчики событий для ввода, для которого вы хотите показать qtip: 

$("#input1").bind("focusin", function() {
    $("#questionmark1").qtip("show");
}).bind("blur", function() {
    $("#" + this.id + "-tip").qtip("hide");
});

См. Пример здесь: http://jsfiddle.net/andrewwhitaker/wCgAM/

Единственная странность состоит в том, что вы можете отобразить обе подсказки, сфокусировав первый ввод, а затем наведя курсор мыши на второй вопросительный знак. Это, вероятно, достаточно легко исправить.

Надеюсь, это поможет.

...