アットシステムとは サービス紹介 保守管理受注WEB 会社紹介

ご相談はお気軽にどうぞ。

システム開発 埼玉 お問い合わせ お問い合わせ


-jquery ツールチップについて-

  jquery ツールチップについて

テキストや画像の上にマウスカーソルを重ねたときに「ふき出し」のように補足テキストを表示するUIです。ツールチップ自体はtitle属性やimg属性の
alt属性にテキストを記述すれば、表示させることができますが、ブラウザに依存しており、またHTMLやCSSでカスタマイズすることが出来ません。
そこで、JQueryを使うことによって、ブラウザーに依存しないカスタマイズ可能なツールチップを実装します。

実装デモの後、コードの紹介をいたします。

下記文章の tooltip sampleをマウスでホバーしてみてください

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sed quam ac risus auctor pulvinar. Nullam tellus lorem, volutpat sit amet eleifend quis, semper pellentesque nunc. Aliquam eu tortor nec nisl suscipit vehicula et eu sapien. Maecenas at pretium diam. Proin non luctus diam. Pellentesque risus nisi, scelerisque eu ultricies quis, tooltip sample luctus rhoncus dui. Proin pharetra aliquet justo, vel scelerisque lorem scelerisque eget. Praesent pharetra magna sit amet diam sagittis ac dictum nunc imperdiet. Pellentesque posuere vulputate fermentum. Vivamus fringilla commodo elit, in ornare libero imperdiet sed.

下記文章の tooltip sampleをマウスでホバーしてみてください

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sed quam ac risus auctor pulvinar. Nullam tellus lorem, volutpat sit amet eleifend quis, semper pellentesque nunc. Aliquam eu tortor nec nisl suscipit vehicula et eu sapien. Maecenas at pretium diam. Proin non luctus diam. Pellentesque risus nisi, scelerisque eu ultricies quis, tooltip sample luctus rhoncus dui. Proin pharetra aliquet justo, vel scelerisque lorem scelerisque eget. Praesent pharetra magna sit amet diam sagittis ac dictum nunc imperdiet. Pellentesque posuere vulputate fermentum. Vivamus fringilla commodo elit, in ornare libero imperdiet sed.

マウスのホバーに合せて動きます

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sed quam ac risus auctor pulvinar. Nullam tellus lorem, volutpat sit amet eleifend quis, semper pellentesque nunc. Aliquam eu tortor nec nisl suscipit vehicula et eu sapien. Maecenas at pretium diam. Proin non luctus diam. Pellentesque risus nisi, scelerisque eu ultricies quis,tooltip sample これはjqueryを利用したツールチップになります
ブラウザの挙動に左右されない作りなため、幅広く使用することができます
luctus rhoncus dui. Proin pharetra aliquet justo, vel scelerisque lorem scelerisque eget. Praesent pharetra magna sit amet diam sagittis ac dictum nunc imperdiet. Pellentesque posuere vulputate fermentum. Vivamus fringilla commodo elit, in ornare libero imperdiet sed.

これはjqueryを利用したツールチップになります
ブラウザの挙動に左右されない作りなため、幅広く使用することができます

このように、難しい用語などに設定することによってよりページの見やすさを深めていくことができます

実際のコード

カーソル(マウスポインタ)と連動しているものが特に多く使用されており、
その中で、webページとして読ませる内容、または難しい単語や言葉などに
こちらのUIを使用することによって、ユーザビリティの向上などを
図ることが出来、また簡単なコードであるため、初心者の方でも
安心して使用することができます。

Javascript


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>		
<script type="text/javascript">
$(function(){
	$("span.tooltip").css({
		opacity:"0.9",
		position:"absolute",
		display:"none"
	});
	$("a").mouseover(function(){
		$("span.tooltip").fadeIn();
	}).mouseout(function(){
		$("span.tooltip").fadeOut();
	}).mousemove(function(e){
		$("span.tooltip").css({
			"top":e.pageY+10+"px",
			"left":e.pageX+10+"px"
		});
	});
});
</script>

CSS

		

p{
	margin:10px 10%;
}
span.tooltip{
	line-height:1.5;
	color:white;
	width:200px;
	background:#FF9900;
	border:2px solid white;
	padding:1em;
	font-size:small;
}
a.link{
	color:aqua;
}

HTML

		
<p class="tooltips">
	Maecenas at pretium diam. Proin non luctus diam.
	Pellentesque risus nisi, scelerisque eu ultricies quis,
	<a class="link">tooltip sample</a>
	<span class="tooltip">これはjqueryを利用したになります
		ブラウザの挙動に左右されない作りなため、幅広く使用することができます
	</span> 
	luctus rhoncus dui.
</p>