Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--کار با Tooltip ها در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت چهاردهم آموزش در زیر قرار داده شده است.

کار با Tooltip ها در بوت استرپ                                               قسمت 14

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

چگونه یک ابزار Tooltip بسازیم؟

برای ساختن tooltip کافی است خصوصیت "data-toggle="tooltip را به المان مورد نظر اضافه کنیم

متن یا توضیحات مورد نظر را در خصوصیت Title یا عنوان المانمان قرار می دهیم 

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

کلاس Tooltip  با استفاده از jquery  مقدار دهی اولیه می شود به این صورت که عنصر مشخص را انتخاب کنید
 و متد ()tooltip  را صدا بزنید

کد jquery  مربوط به Tooltip :

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

 

مثال 1 : کد زیر پیاده سازی پلاگین Tooltip را در صفحه وبمان  نمایش میدهد

<body>
 <div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
 
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>
</body>

نتیجه اجرای مثال 1 :

6358318165474334091.png





موقعیت قرار گیری Tooltip  :
به طور پیش فرض ، راهنمای ابزار در بالای عناصر ظاهر خواهد شد
با استفاده از data-placement موقعیت قرار گیری Tooltip را به صورت بالا,پایین,چپ,راست برای 
عناصرمان تنظیم  می کنیم
مثال 2 : کد زیر استفاده از موقعیت Tooltip را در چهار حالت top, bottom, left, right نشان می دهد
<body>
 <div class="container">
  <h3>Tooltip Example</h3>
  <p>The data-placement attribute specifies the tooltip position.</p>
  <ul class="list-inline">
    <li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">
Top</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">
Bottom</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">
Left</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">
Right</a></li>
  </ul>
</div>
 
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>
</body>

 اجرای کد به صورت زیر می باشد
 

6358318194988622212.png

 

 

 

 

    6358318196965635293.png

6358318197999894444.png

 

6358318199131659175.png

 

 

 

 

 

 

 

 پایان قسمت 14

 

 ادامه آموزش در قسمت  پانزدهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

 منبع : https://www.w3schools.com

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

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