tooltipsterの属性/変数は無視されます

Question

tooltipster（素晴らしいbtw）がjavascript/headセクションで宣言されたvarを考慮しない理由を理解するために2日間試してきました。

<script> 
$(document).ready(function() { 
    $('.tooltip').tooltipster({ 
     var data = 'toto'; 
     contentAsHTML: true, 
     animation: 'slide', 
     delay: 100, 
     content : $(data) 
     }); 
}); 
</script> 

で：たとえば

<img src="Pics/winter.png" alt="winter" border="1" class="tooltip" /> 

（ツールチップは、HTMLページに表示されないという意味）すべてで働いていません。私はいくつかのコーディングバリエーションを試しました。 'などがありますが、結果は変わりません。 私も使用して、要素の属性を取得しようとしました：

content : '$(this).attr('alt')' 

私の最終的な目標であり、それはどちらか動作しません。私は何が欠けていますか？

Answer 1

最も可能性の高い理由は、tooltipsterが受け入れる

var data = 'toto'; 

contentAsHTML、animation、delay、contentなどなオプションです。

しかし、それはvar data = 'toto';渡って来ているとき、それは私がの内容を設定する「正しい」方法をデモするために迅速jsFiddle作った

Answer 2

を受け入れることができtooltipsterオプションではありませんので、それがエラーを介します元の要素のツールチップ - それを初期化します。

これは前に働いていなかった理由は、によるものであった：

1. あなたはtooltipster関数に渡されたJSONオブジェクト内の変数を宣言するdata - これには、JavaScriptのために無効な構文です。
2. thisのcontentプロパティでは、2番目の試みは近づいていますが、外側のthisスコープにあいまいな参照があります。ツールチップマスターインスタンスまたは後にあったHTMLノードとは無関係です。

ここであなたが望む何をすべき改正コードです：

$(document).ready(function() { 
    $('.tooltip').tooltipster({ 
     contentAsHTML: true, 
     animation: 'slide', 
     delay: 100, 
     functionInit: function(instance, helper) { 
      var alt = $(helper.origin).attr('alt'); 
      instance.content(alt); 
     } 
    }); 
}); 

は、私はこれが:)