要素の内容に基づいてTooltipsterでツールチップを生成

Question

Tooltipsterライブラリを使用してツールチップを生成し、単純なAJAX-custom-functionの例を基礎として使用しています。私はそれを修正する必要がありますが、静的な "http://example.com/ajax.php"を照会するのではなく、代わりに "http://example.com/ajax.php?id=contents_of_the_element_being_clicked"が表示されます。たとえば、HTMLに<span>textbook</span>がある場合、ポップアップのコンテンツリンクは "http://example.com/ajax.php?id=textbook"になります。

<span>でアクティブにする例を正常に再利用しましたが、できないことは、その<span>のinnerHTMLコンテンツをどのように持っていくかを理解することです。

私が探しているのは、後で$ .get ...関数（データ）リクエストに追加できる要素の内容を変数に取り込む行です。

Answer 1

のhtml()関数を使用して、内側のhtmlを抽出することができます。さらに、param()を使用して、抽出されたhtmlをエンコードすることができます。

var param = "?" + $.param({ id: origin.html() });  

全例（Tooltipster 3.3.0とjQuery 1.10での作業）：

$('.tooltip').tooltipster({  
    functionBefore: function(origin, continueTooltip) { 
     var param = "?" + $.param({ id: origin.html() });  
     if (origin.data('loaded') !== true) { 
      $.get('example.com/ajax.php' + param, function(data) { 
       origin.data('loaded', true); 
       origin.tooltipster('content', data.id); 
       continueTooltip(); 
      });    
     } 
     else { 
      continueTooltip();   
     } 
    } 
}); 

Tooltipster Version 4：

$('.tooltip').tooltipster({  
    content: 'Loading...', 
    functionBefore: function(instance, helper) { 
     var $origin = $(helper.origin); 
     var param = "?" + $.param({ id: $origin.html() });  
     if ($origin.data('loaded') !== true) { 
      $.get('example.com/ajax.php' + param, function(data) { 
       instance.content(data.id); 
       $origin.data('loaded', true); 
      });    
     } 
    } 
}); 

HTML：

<span class="tooltip" title="This is my span's tooltip message!">Some text test</span>