آموزش کار با پلاگین Tooltip بوت استرپ

آموزش کار با پلاگین Tooltip بوت استرپ

سلام دوستان. توی این مطلب آموزش کار با پلاگین Tooltip بوت استرپ رو به اشتراک گذاشته ایم. در این قسمت میخوام بپردازم به آموزش ساخت Tooltipدر فریم ورک بوت استرپ. همان طور که میدونید tooltip باکس های کوچیکی هستند که غالبا فقط حاوی متن اند و وقتی ظاهر می شوند که شما روی آیتم مورد نظر در صفحه وب، موس خود را Hover کنید. در واقع از Tooltipها برای نمایش متن های کوچیک استفاده می کنند و اگر شما بخواهین که علاوه بر متن ، عکس هم داشته باشین و یا شکل ظاهری دیگری رو داشته باشین میتونید از Popover ها استفاده کنید. اگر درباره Popover ها اطلاعاتی ندارین میتونید به آموزش ساخت Popover مراجعه کنید و باهاش آشنا بشین. با ما همراه باشید لطفا…

 

آموزش کار با پلاگین Tooltip بوت استرپ

پلاگین تولتیپ یک جعبه پاپ آپ کوچک است که وقتی کابر اشاره گر موس را بر روی یک عنصر یا لینک خاص حرکت میدهد نشان داده میشود

1

 

نکته : پلاگین ها را میتوان به صورت جداگانه (توسط فایل بوت استرپ جداگانه ) tooltip.js و یا به صورت یکجا ( با استفاده از bootstrap.js و یا bootstrap.min.js اضافه کرد.

 

نحوه ساخت تولتیپ :

برای ایجاد یک تولتیپ خاصیت data-toggle=”tooltip را به یک عنصر اضافه کنید.

از خاصیت title برای مشخص کردن متنی که باید در تولتیپ نمایش داده شود استفاده کنید.

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

نکته : tooltip باید توسط جی کوئری آغاز شود : عنصر مخصوص را انتخاب کنید و متد tooltip() را فراخوانی نمایید.

کد زیر تمام تولتیپ های درون یک سند – داکیومنت را فعال میکند :

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

 

موقعیت یابی تولتیپ

به صورت پیش فرض تولتیپ در بالای عنصر مورد نظر قرار میگیرد. از خاصیت data-placement برای تنظیم موقعیت تولتیپ در بالا ، پایین ، چپ و راست عنصر استفاده کنید .

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

 

نکته : همچنین میتوانید از خاصیت data-placement با مقدار auto استفاده کنید که که در این صورت مرورگر شما خودش موقیعت تولتیپ را تنظیم میکند .

برای مثال اگر مقدار auto left باشد تولتیپ در صورت امکان در سمت چپ نمایش داده خواهد شد و در غیر این صورت در سمت چپ نشان داده میشود .

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

پکیج اختصاصی سی شارپ 2015، SQL Server و Asp.Net به زبان فارسی
  • انتشار: ۲۸ مهر ۱۳۹۵

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.