سبد (0)

آموزش ساخت tooltip ساده و متحرک

ساخت tooltip با استفاده از پلاگین jQuery.mousetip

پلاگین jQuery.mousetip، با استفاده از جی کوئری،  امکان ایجاد یک tooltip را فراهم می کند.

تولتیپ (tooltip)، در واقع یک باکس کوچک حاوی توضیحات یا اطلاعات خاصی است، که وقتی نشانگر موس بر روی عنصری در صفحه قرار می گیرد به نمایش در می آید.

DEMO یا پیش نمایش پلاگین  jQuery.mousetip

برای مشاهده نتیجه کار، روی لینک زیر کلیک نمایید:

نحوه استفاده

 برای استفاده از این ابزار، می بایست کتابخانه جی کوئری و پلاگین مورد نظر را در سند HTML  فراخوانی کنید .

تگ های اسکریپت مربوط به فراخوانی این دو فایل بین دو تگ <head> قرار می گیرند.

توجه: فایل های مورد نیاز را می توانید از انتهای همین مطلب دانلود نمایید .

بارگزاری  پلاگین

<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript"src="http://code.nath.co/src/jQuery.min.js"></script>
<script type="text/javascript"src="https://rawgit.com/nathco/jQuery.mousetip/master/jQuery.mousetip.js"></script>
<title>ساخت تولتیپ متحرک با jQuery</title>
</head>
<body>
 
 
</body>
</html>

در ادامه لازم است که یک عنصر با نام کلاس "tip" ایجاد کنیم تا متد () mousetip را فراخوانی کند .

کد HTML

<div>Content<span class="tip">Mousetip 1</span></div>
<div>Content<span class="tip">Mousetip 2</span></div>
<div>Content<span class="tip">Mousetip 3</span></div>
 

کد jQuery

$(function() {

    // Default
    $('div').mousetip('.tip');

    // Custom Position
    $('div').mousetip('.tip', 20, 30);

});

 همانطور که در کد جی کوئری بالا مشاهده می کنید می توان موقعیت نمایش tooltip نسبت به عنصر را به دلخواه مشخص کرد و یک نمایش سفارشی ایجاد کرد.

کد CSS

span.tip {

    /* Required */
    position: absolute;
    z-index: 2;
    display: none;

    /* Optional */
    font-size: 15px;
    max-width: 150px;
    height: auto;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 0 1px 2px #666;
    background: #FD0;
}

 در مثال زیر می توانید نحوه اجرای کدهای ذکر شده را مشاهده نمایید:

مثال (آموزش ساخت tooltip ساده و متحرک)

 
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript"src="http://code.nath.co/src/jQuery.min.js"></script>
<script type="text/javascript"src="https://rawgit.com/nathco/jQuery.mousetip/master/jQuery.mousetip.js"></script>
<script>
span.tip {

    /* Required */
    position: absolute;
    z-index: 2;
    display: none;

    /* Optional */
    font-size: 15px;
    max-width: 150px;
    height: auto;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 0 1px 2px #666;
    background: #FD0;
}
</script>
<title>ساخت تولتیپ متحرک با jQuery</title>
</head>
<body>
  
<div>Content<span class="tip">Mousetip 1</span></div>
 
</body>
</html>
خودتان امتحان کنید »

 

 دانلود فایل های پلاگین jQuery.mousetip

حجم: 41.50 کیلو بایت

نوشته شده توسط شهربانو دوستی
بازدید: 12513

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه