jQuery

サクッと簡単にCSSとJavascriptでシンプルなツールチップを実装する

simple-toolip

プラグインを使わず簡単にCSSとJavascriptでシンプルなツールチップのご紹介です。
実装は、とても簡単でjQuery本体と少しのコードで実装可能です。
こちらのツールチップは、a要素にrel="tooltip"を検出して、rel属性の記載があれば、a要素のtitle属性に記載してある文字を【ツールチップとして表示させます
デモサイトもありますので、一度ご参考頂ければと思います。

デモサイト

実装方法

それでは、実装方法をご紹介していきたいと思います。

jQuery本体の読み込み

まずは、jQuery本体を読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>

スクリプトの記載

jQuery本体を読み込んだら、次にツールチップのスクリプトを記載していきます。
下記をコピーして貼り付けて下さい。

<script type="text/javascript">
$(document).ready(function() {
	
	$('a[rel=tooltip]').mouseover(function(e) {

		var tip = $(this).attr('title');	
		$(this).attr('title','');
		$(this).append('<div id="tooltip"><div class="tipBody">' + tip + '</div></div>');		
		
		$('#tooltip').fadeIn('500');
		$('#tooltip').fadeTo('10',0.9);
		
	}).mousemove(function(e) {
		$('#tooltip').css('top', e.pageY + 10 );
		$('#tooltip').css('left', e.pageX + 20 );
		
	}).mouseout(function() {
		$(this).attr('title',$('.tipBody').html());
		$(this).children('div#tooltip').remove();
		
	});

});
</script>

HTML

次にHTMLを記載します。
必ず、a要素にrel="tooltip"とtitle属性の記載を忘れずに行って下さい。

<a rel="tooltip" title="ツールチップ">ツールチップが出るよ</a>

CSS

最後にCSSでツールチップの装飾をします。

#tooltip{
	font-family:"メイリオ","MS Pゴシック",sans-serif;
	position:absolute;
	z-index:9999;
	color:#fff;
	font-size:12px;
	background:#000;
	padding:10px;
	width:100px;
	line-height:1.5;
    -webkit-border-top-right-radius: 10px;  
    -webkit-border-bottom-right-radius: 10px;  
    -webkit-border-bottom-left-radius: 10px;   
    -moz-border-radius-topright: 10px;  
    -moz-border-radius-bottomright: 10px;  
    -moz-border-radius-bottomleft: 10px;
}

上記まで、記載すれば、シンプルなツールチップの実装完了です。
とても簡単に実装出来ると思いますので、ちょっとツールチップ使いたいんだよなって時に役に立つツールチップかもしれません。
デモサイトもありますので、是非ご参考下さい。

デモサイト

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

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

About

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

関連記事

コメント

コメントをどうぞ

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

PREVIOUS large_4382008106

WordPressプラグイン【AmazonJS】シークレットアクセスキーではまってしまった・・

NEXT large_6835624429

HTMLとCSSを勉強中に僕も参考にした入門書・書籍のご紹介