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

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

サイトのキャプチャ

Sweet Tooltip a jQuery & CSS3 Tooltips

Sweet Tooltipのデモ

デモのキャプチャ

デモページ

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

デモのキャプチャ

デモページ:Sweet Strong

デモのキャプチャ

デモページ:Mini Slick

デモのキャプチャ

デモページ: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');
				
		});
	});
});

top of page

©2017 coliss