نحوه ایجاد tooltip در بوت استرپ

[webone 0]

بوت استرپ یک چارچوب قدرتمند جهت طراحی سایت سریعتر و راحتتر میباشد که شامل قالب های آماده بر پایه HTML و CSS است در اینجا با نحوه تعریف و ایجاد tooltip ها از طریق بوت استرپ آشنا میشویم:

tooltip چیست ؟

tooltip یک توضیح مختصر درباره یک عنصر است که زمانی که کاربر موس خود را روی عنصر مورد نظر می برد، نمایش داده میشود.

tooltipها برای کاربران جدید وب سایت شما میتوانند بسیار مفید و کمک کننده باشند زیرا کاربران را از هدف لینک ها یا دکمه ها آگاه میکنند.

فعال کردن tooltip :

tooltipها میتوانند از طریق جاوا اسکریپت فعال شوند کافیست تابع ( )tooltip. را همراه با id یا کلاس عنصر مقصد، در کد جاوا اسکریپت فراخوانی نمایید.

 

http://webone.co/filegallery/webone.co//bs-tooltip1.png[/img]

 

 

خروجی مثال بالا به شکل زیر خواهد بود :

http://webone.co/filegallery/webone.co//bs-tooltip2.png[/img]

 

نکته : باید خودتان به tooltipها مقدار دهی کنید.

تنظیم مکان قرارگیری tooltip :

میتوانید tooltip را طوری تنظیم کنید که در بالا، پایین و سمت چپ یک عنصر قرار گیرد.

 

مثال زیر نحوه تنظیم مکان tooltip را با استفاده از جاوا اسکریپت نمایش میدهد :

 

http://webone.co/filegallery/webone.co//bs-tooltip4.png[/img]

توابع :

توابع زیر، توابع استاندارد بوت استرپ برای tooltip ها میباشند.

( tooltip (options.( )$

این تابع، tooltip را به گروهی از عناصر پیوست میکند. همچنین اجازه میدهد که برای tooltipها آپشن بگذارید. بنابراین میتوانید آن ها را با توجه به نیازتان تغییر دهید.

 

http://webone.co/filegallery/webone.co//bs-tooltip5.png[/img]

 

 

زمانی که ویژگی title در تگ a موجود نباشد یا مقدار آن دچار مشکل شده باشد، متن موجود در این تابع در tooltip نمایش داده میشود.

مثال زیر نحوه قرار دادن محتوای HTML در داخل یک tooltip را نمایش میدهد :

 

http://webone.co/filegallery/webone.co//bs-tooltip8.png[/img]

 

 

خروجی مثال بالا به شکل زیر خواهد بود :

http://webone.co/filegallery/webone.co//bs-tooltip9.png[/img]

(' tooltip ('show.

این تابع، tooltip یک عنصر را نمایش میدهد(میتوانید نمایش tooltip را با دکمه ها کنترل نمایید).

 

http://webone.co/filegallery/webone.co//bs-tooltip14.png[/img]

 

 

(' tooltip ('hide.

این تابع، tooltip یک عنصر را مخفی میکند(میتوانید مخفی شدن tooltip را با دکمه ها کنترل نمایید).

 

http://webone.co/filegallery/webone.co//bs-tooltip15.png[/img]

 

 

(' tooltip ('toggle.

این تابع، اگر tooltip مخفی باشد آن را نمایش میدهد و اگر در حال نمایش باشد آن را مخفی میکند.

 

http://webone.co/filegallery/webone.co//bs-tooltip16.png[/img]

 

(' tooltip ('destroy.

این تابع، tooltip یک عنصر را مخفی کرده و آن را از بین میبرد.

 

http://webone.co/filegallery/webone.co//bs-tooltip17.png[/img]