یکی از دلایلی که باعث میشود کاربران در سایت شما باقی بمانند ، زیبایی و طراحی چشم نواز سایت شماست ! کتابخانه tooltip در بخش های مشخصی از سایت شما تغییراتی را اعمال می کند که ، تا زمانی که کاربر موس خود را روی یک گزینه مشخص قرار دهد یک کادر مستطیل شکل کوچک باز میشود و در باره آن توضیح مختصری میدهد .

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

دانلود کتابخانه tooltip

tooltip

قبل از دانلود این کتابخانه بهتر است که شما ، کتابخانه جی کوئری را دانلود کنید و آن را در سند html خود فراخوانی کنید .

کتابخانه tooltip ها دارای یک فایل script و همچنین یک فایل css میباشد ، که طبق روال css باید در هدر و فایل اسکریپت در انتهای body تعریف میشود!

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

برای دانلود کتابخانه جی کوئری از اینجا کلیک کنید.

نحوه استفاده از این کتابخانه

نحوه استفاده از این کتابخانه بسیار آسان و راحت است و تنها کافیست همانند کد های زیر در سند html از آن استفاده کنید .

   <div> <a href="#" onmouseover="tooltip.pop(this,'#sub1',{position:0,effect:'slide'})"><span class="fa fa-user fa-2x"></span></a>
            <div style="display:none">
                  <div id="sub1">نویسنده : دهکده دانش</div>
                </div>
          </div>

در نهایت نتیجه آن به شکل زیر است:

tooltip

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

نحوه استفاده از tooltip کتابخانه در بوت استرپ

برای استفاده از tooltip در بوت استرپ نیازی به دانلود این کتابخانه نیست ولی وجود جی کوئری همچنان الزامی است.

برای استفاده از این کتابخانه باید به شکل زیر عمل کنید :

  1. ابتدا این اسکریپت را در تگ body درانتها قرار دهید
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

۲) سپس به این شکل در لابه لای کد ها آن را فراخوانی کنید :

 <div> <a href="#" data-toggle="tooltip" data-placement="right" title="نویسنده : آرتا زرندی"><span class="fa fa-pencil fa-2x"></span></a>
                             
                       </div>

و در نهایت خروجی آن به شکل زیر است:

tooltip

Leave a Reply

Your email address will not be published.Required fields are marked *

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