2

私のフォームには入力と選択のコントロールがほとんどなく、それぞれの前に小さな疑問符のアイコンがあり、優れたjqueryjquery.qtip-1.0.0-rc3の助けを借りてマウスがそのgifの上にあるときにツールチップを表示します.js（with jquery-1.3.2.min.js）プラグインは次のようになります：

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

また、対応する入力フィールドがフォーカスされたときにツールチップを表示し、ぼやけたときに非表示にします。次の1つはトリックを実行しますが、マウスがその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'} }

要するに、前の最初の2ブロックのコードは正常に機能し、目標を達成するために両方を追加できますが、正しい方法で実行したいと思います。
単一のツールチップを表示するために、複数のターゲットのイベントをターゲットにするにはどうすればよいですか？

4

1 に答える 1

3

への呼び出し内ですべての表示/非表示イベントを接続する必要はありません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/

唯一の奇妙な点は、最初の入力にフォーカスしてから 2 番目のクエスチョン マークの上にマウスを置くことで、両方のツールチップを表示できることです。ただし、これはおそらく簡単に修正できます。

それが役立つことを願っています。

于 2011-01-02T21:59:44.473 に答える