Jump to content

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


webone

Recommended Posts

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

tooltip چیست ؟

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

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

فعال کردن tooltip :

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

 

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

 

 

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

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

 

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

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

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

 

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

 

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

توابع :

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

( tooltip (options.( )$

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

 

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

 

 

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

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

 

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

 

 

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

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

(' tooltip ('show.

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

 

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

 

 

(' tooltip ('hide.

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

 

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

 

 

(' tooltip ('toggle.

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

 

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

 

(' tooltip ('destroy.

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

 

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...