Tech Racho エンジニアの「?」を「!」に。
  • 開発

jQuery.qTipをjQuery1.4で使う

よく欲しくなるJavaScriptライブラリに、ツールチップがあります。

jQueryにもたくさんのTooltipプラグインがありますが、使い方が簡単でデザインが綺麗なものということで、qTipを選んでみました。
http://craigsworks.com/projects/qtip/

とても良くできていますが、現状(1.0.0-rc3)では、jQuery 1.4に対応していないようです。
そのまま使うと、以下のエラーが発生します。

$(this).data(“qtip”) is null
Line 138

これは、jQueryのdata()メソッドの挙動が変更になったためです。

以下のサンプルコードを実施すると分かりますが、jQuery 1.3では「undefined」が表示され、1.4 では「null」が表示されます。

<!DOCTYPE html>
<html>
<script type="text/javascript" src="jquery14.js"></script>
</head>
<body>
<h1>test</h1>
<script type="text/javascript">
	alert($('h1').data('hoge'));
</script>
</body>
</html>

JavaScriptでは、nullのtypeはobjectなので、qTipの判定式が誤作動しています。

これを修正するには、qTipのdevelopment版(jquery.qtip-1.0.0-rc3.js)で133行目にあたる箇所に、次の赤い部分を書き加えます。

// Check if element already has qTip data assigned
if(typeof $(this).data(‘qtip’) == ‘object’ && $(this).data(‘qtip’))
{
// Set new current interface id
if(typeof $(this).attr(‘qtip’) === ‘undefined’)
$(this).data(‘qtip’).current = $(this).data(‘qtip’).interfaces.length;

// Push new API interface onto interfaces array
$(this).data(‘qtip’).interfaces.push(obj);
}

これで、jQueryのバージョンを落とさずに便利なライブラリを使えますね。

もちろん、ライセンスは要確認です。


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。