jQueryツールオンチップの埋め込みツールチップヒント

Question

イメージ上でjqueryツールのツールチップを使用しています。ツールヒントの基本的な使い方です。誰かが画像の上を転がり、背景の画像が暗くなり、ツールチップがポップアップして「詳細を見る」と言うと、この点まではうまくいきます。私は実際には、画像の詳細とオーバーレイウィンドウを開くように、ツールチップをクリック可能にしたいと思います。私はそれについてどうやって行くのか分からないのですか？ htmlコンテンツは、.albumImageクラスとimg srcを持つdivです。ほとんどの場合、このガイドの内容はそのままです。次のように私のスクリプトは...あなたがイメージを置くと、あなたの.tooltip()は、ページ内のいくつかのDOMを生成する可能性があることを考慮すると

$(".albumImage img[title]").tooltip({ 

    position: 'top center', 
    offset: [80,0], 

    onShow: function() { 
    this.getTrigger().fadeTo("0", 0.3); 
    }, 
    onHide: function() { 
    this.getTrigger().fadeTo("0", 1.0); 
    } 

}); 

Answer 1

単純にツールチップを設定する前に、クリックハンドラを追加します。

$(".albumImage img[title]").click(function(){ 
    alert('Hello!'); 
}); 


$(".albumImage img[title]").tooltip({ 
    position: 'top center', 
    offset: [80,0], 
    onShow: function() { 
     this.getTrigger().fadeTo("0", 0.3); 
    }, 
    onHide: function() { 
     this.getTrigger().fadeTo("0", 1.0); 
    } 
}); 

Answer 2

です。 DOMは<div id='tooltip'>blah blah blah</div>です。

最後に、.tooltip()機能によって生成されたDOMにclickイベントを添付します。

$(".albumImage img[title]").tooltip({ 

    position: 'top center', 
    offset: [80,0], 

    onShow: function() { 
     this.getTrigger().fadeTo("0", 0.3); 
     $('#tooltip').click(function() { 
      //Write your code to open up a lightbox showing 
      //the respective image and its details. 
     }); 
    }, 
    onHide: function() { 
     this.getTrigger().fadeTo("0", 1.0); 
    } 

});