آموزش ساخت تولتیپ با جی کوئری

خانه » بلاگ » bootstrap » آموزش ساخت تولتیپ با جی کوئری

تولتیپ چیست؟

تولتیپ را می توان به هر عنصر فعال (آیکون ها، پیوندهای متنی، دکمه ها و غیره) در یک صفحه متصل کرد. آنها توضیحاتی را برای عنصر خود ارائه می دهند. بنابراین، تولتیپ بسیار متنی و خاص هستند. در این مبحث از مجموعه آموزش های وب یار می خواهیم نحوه ساخت تولتیپ را آموزش دهیم.

ابتدا توسط جی کوئری یک تابع می سازیم تا برای تولتیپ tooltip از آن برای تول تیپ لینک ها استفاده کنیم آموزش ساختن تولتیپ

tooltip

محوریت کار این تابع، گرفتن توضیحات (Description) از خاصیت (attribute) عنوان (title) یک لینک، حذف حالت پیشفرض و تعیین حالتی جدیداست و این عملیات رو میتوانیم به راحتی با کمک جی کوئری پیاده سازی کنیم. به همین منظور، تابع زیر را تعریف کردیم:

JQuery

$( document ).ready( function()
{
	var targets = $( '[rel~=tooltip]' ),
		target	= false,
		tooltip = false,
		title	= false;

	targets.bind( 'mouseenter', function()
	{
		target	= $( this );
		tip		= target.attr( 'title' );
		tooltip	= $( '<div id="tooltip"></div>' );

		if( !tip || tip == '' )
			return false;

		target.removeAttr( 'title' );
		tooltip.css( 'opacity', 0 )
			   .html( tip )
			   .appendTo( 'body' );

		var init_tooltip = function()
		{
			if( $( window ).width() < tooltip.outerWidth() * 1.5 )
				tooltip.css( 'max-width', $( window ).width() / 2 );
			else
				tooltip.css( 'max-width', 340 );

			var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
				pos_top	 = target.offset().top - tooltip.outerHeight() - 20;

			if( pos_left < 0 )
			{
				pos_left = target.offset().left + target.outerWidth() / 2 - 20;
				tooltip.addClass( 'left' );
			}
			else
				tooltip.removeClass( 'left' );

			if( pos_left + tooltip.outerWidth() > $( window ).width() )
			{
				pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
				tooltip.addClass( 'right' );
			}
			else
				tooltip.removeClass( 'right' );

			if( pos_top < 0 )
			{
				var pos_top	 = target.offset().top + target.outerHeight();
				tooltip.addClass( 'top' );
			}
			else
				tooltip.removeClass( 'top' );

			tooltip.css( { left: pos_left, top: pos_top } )
				   .animate( { top: '+=10', opacity: 1 }, 50 );
		};

		init_tooltip();
		$( window ).resize( init_tooltip );

		var remove_tooltip = function()
		{
			tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
			{
				$( this ).remove();
			});

			target.attr( 'title', tip );
		};

		target.bind( 'mouseleave', remove_tooltip );
		tooltip.bind( 'click', remove_tooltip );
	});
});

در ساخت تولتیپ با جی کوئری توابع مهم ما عبارتند از:

• attr (تابع پیشفرض جی کوئری) که به همراه مقدار title، وظیفه گرفتن توضیحات خاصیت یک عنوان رو دارد
• init_tooltip مربوط به بحث موقعیت (position) سازی
• remove_tooltip هم برای این که وقتی موس رو از روی یک لینک برداشتیم، کادر تولتیپ رو مخفی کنه…

اما یک بخش مهم دیگه در تابع بالا، تعریف یک متغیر با نام targets که مقدار خاصیت “rel=”tooltip رو (در صورت موجود بودن) میگیرد و انجام کلیه توابع رو محدود به وجود این متغیر میکند. حالا با توجه به این توضیحات، جهت استفاده از تابع بالا، تنها کافی است که خاصیت  “rel=”tooltip رو به لینک هامون اضافه کنیم. به عنوان نمونه:

HTML

<a href="#" title="دنیای وردپرس و برنامه نویسی" rel="tooltip">مشاهده تولتیپ</a>

* توجه: یادتون باشه که برای کار کردن تولتیپ، حتما باید لینک هاتون دارای خاصیت عنوان (title) باشند.

تا اینجا بخش مهمی از کار رو انجام دادیم، سپس با استفاده از نام آی دی tooltip (که تعریفش رو در متغیر tooltip ریخته بودیم)، یک استایل زیبا رو در فرم زیر ایجاد میکنیم که شباهت زیادی به tooltip در بوت استرپ دارد:

CSS

#tooltip
{
	font-family: Tahoma, sans-serif;
	font-size: 0.875em;
	text-align: center;
	text-shadow: 0 1px rgba( 0, 0, 0, .5 );
	line-height: 1.5;
	color: #fff;
	background: #333;
	background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .8 ) ), to( rgba( 0, 0, 0, .8 ) ) );
	background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
	background: -moz-linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
	background: -ms-radial-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
	background: -o-linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
	background: linear-gradient( top, rgba( 0, 0, 0, .8 ), rgba( 0, 0, 0, .8 ) );
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	position: absolute;
	z-index: 100;
	padding: 15px;
}

#tooltip:after
{
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top-color: #333;
	border-top: 10px solid rgba( 0, 0, 0, .8 );
	content: '';
	position: absolute;
	left: 50%;
	bottom: -10px;
	margin-left: -10px;
}
#tooltip.top:after
{
	border-top-color: transparent;
	border-bottom-color: #333;
	border-bottom: 10px solid rgba( 0, 0, 0, .8 );
	top: -20px;
	bottom: auto;
}

#tooltip.left:after
{
	left: 10px;
	margin: 0;
}

#tooltip.right:after
{
	right: 10px;
	left: auto;
	margin: 0;
}