jQuery

軽量で簡単に実装が出来る jQueryツールチップ プラグイン【Tipso】使い方

tipso

今回は、軽量のjQueryツールチッププラグインの使い方のご紹介です。
こちらのjQueryプラグインは、実装も簡単な上に軽量なツールチッププラグインとなっております。
最近では、よくツールチップがアイコンフォントなんかに使われているのを見ます。
ちょっとした文字をマウスホバーで表示させるのは、レイアウト/デザインの保持やスペースの節約になると思います。
また、以前にツールチップの記事を書きましたが、以前書いたツールチップは、マウスの動きに合わせてツールチップも表示されますが、こちらのツールチッププラグイン【Tipso】は、ご自身で上・右・下・左など指定した場所に表示されます。
下記に実際に【Tipso】を利用したデモサイトもありますので、ご確認頂ければと思います。

デモサイト

実装に必要なファイルなどもありますので、下記リンク先よりダウンロードして下さい。

【Tipso】

Tipso 実装方法

それでは、jQueryツールチッププラグイン【Tipso】を実装していきたいと思います。
実装するにあたりこちらより必要なファイル等は事前にダウンロードしておいて下さい。

必要ファイルの読み込み

まずは、jQuery本体とダウンロードした【tipso.min.js】【tipso.min.css】をhead内に読み込みます。
ファイルの階層などは、ご自身の環境などに合わせて下さい。

<link rel="stylesheet" type="text/css" href="css/tipso.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/tipso.min.js"></script>

HTMLの準備

今回は、仮に p要素内のspan要素にクラス名つけてツールチップを出したいと思います。
クラス名などは、自由に付けて大丈夫で、今回、【.tooltip】とつけています。
ツールチップの文字が表示されるのは、title属性に記載している文字がツールチップとして表示されます。

<p>テキスト<span class="tooltip" title="この文字がツールチップとして表示されます">ツールチップ</span>テキスト</p>

Scriptの挿入

上記span要素のクラス名tooltipを指定します。
オプションなどもあるのですが、後ほどご説明致します。

	<script>
		jQuery(document).ready(function(){
			$('.tipso').tipso();
			
		});
	</script>

上記まで記載したら、span要素にマウスを合わせるとツールチップが表示されます。
下記リンク先に実際に【Tipso】を利用したデモサイトもありますので、ご確認頂ければと思います。

デモサイト

【Tipso】オプション

jQueryツールチッププラグインには、便利なオプションも用意されていますので、そちらもご紹介させて頂きます。

jQuery('.クラス名など').tipso({
	speed       : 400, //speed
	color       : '#ffffff', //文字色
	position: 'bottom', //位置の指定 top・right・bottom・left
	background: '#2574A9', //背景色
	useTitle: true,//trueにすると要素のtitleをツールチップで表示/falseにすればdata-tipso=""をツールチップで表示する
	width       : 200,//幅
	delay       : 200,//高さ
	offsetX     : 0,//横軸の位置
	offsetY     : 0,//縦軸の位置
});

上記のようなオプションが用意されています。
positionでは、top/right/bottom/leftで上や左などツールチップの位置の指定が可能です。
また、useTitleですがfalseにすると要素内のdata-tipsoに書かれている文字をツールチップで表示されます。デフォルトでは、trueになっています。 スピードや背景色なども簡単に変更出来ますので、意外と便利なツールチップだと思います。

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS hunterxhunter

HUNTER×HUNTER バトルオールスターズ VS.クロロ(上級) を攻略したパーティメンバー

NEXT login-rename0

WordPressのログインURLを変更するプラグイン【Rename wp-login.php】