[JS]洗練されたかわいらしいデザインのツールチップを簡単に実装できるスクリプト -Sweet Tooltip

Dribbbleのポストにインスパイアされ、CSS3で美しくスタイリングしたツールチップを簡単に実装できるjQueryのプラグインを紹介します。

Sweet Tooltip a jQuery & CSS3 Tooltips

[ad#ad-2]

• Sweet Tooltipのデモ
• Sweet Tooltipの使い方

Sweet Tooltipのデモ

デモページ

デモでは7種類のスタイルのツールチップを楽しむことができます。

デモページ：Sweet Strong

デモページ：Mini Slick

[ad#ad-2]

デモページ：Big Grey

デモページ：Nightly

デモページ：Shiny Red

デモページ：Soft Blue

デモページ：Big Yellow

Sweet Tooltipの使い方

外部ファイル

スタイルシートをhead内に、スクリプトをページの下部に外部ファイルとして記述します。

<link rel="stylesheet" href="sweet-tooltip.css">

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript" src="sweet-tooltip.js"></script>

HTML

ツールチップはa要素を使用して実装します。

<a href="#" class="sweet-tooltip" data-style-tooltip="style name" data-text-tooltip="Tooltip's text to be disaplayed">  
        Your text  
</a> 

data-style-tooltip

ツールチップのスタイルを指定

data-text-tooltip

ツールチップに表示するテキスト

sweet-tooltips.js

「sweet-tooltips.js」は下記のようになっています。

$(document).ready(function() {
	
	$('.sweet-tooltip').bind('mouseover', function() {
		
		tooltip				= $(this);
		tooltipText 		= tooltip.attr('data-text-tooltip');
		tooltipClassName	= tooltip.attr('data-style-tooltip');
		tooltipClass		= '.' + tooltipClassName;
		
		if(tooltip.hasClass('showed-tooltip')) return false;
		
		tooltip.addClass('showed-tooltip')
				 .after('<div class="'+tooltipClassName+'">'+tooltipText+'</div>');

		
		tooltipPosTop 	= tooltip.offset().top - $(tooltipClass).outerHeight() - 10;
		tooltipPosLeft = tooltip.offset().left;
		tooltipPosLeft = tooltipPosLeft - (($(tooltipClass).outerWidth()/2) - tooltip.outerWidth()/2);
		
		$(tooltipClass).css({ 'left': tooltipPosLeft, 'top': tooltipPosTop })
							.animate({'opacity':'1', 'marginTop':'0'}, 500);
		
	}).bind('mouseout', function() {
		
		$(tooltipClass).animate({'opacity':'0', 'marginTop':'-10px'}, 500, function() {
				
			$(this).remove();
			tooltip.removeClass('showed-tooltip');
				
		});
	});
});