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のバージョンを落とさずに便利なライブラリを使えますね。

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

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。 高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。Ruby on Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。軽度の資格マニアで、情報処理技術者試験(16区分17回 + 情報処理安全確保支援士試験)、技術士(情報工学部門)、Ruby Programmer Gold、AWSソリューションアーキテクト(アソシエイト)、日商簿記2級、漢検準1級などを保有。

babaの書いた記事

夏のTechRachoフェア2019

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ