نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip) از سری آموزش های تک قسمتی است.

 

تولتیپ (Tooltip)

قبلا توضیح داده ایم که تولتیپ چیست و حتی درباره نحوه ساخت آن در بوت استرپ ۳ نیز توضیح داده ایم اما برای آن دسته از دوستانی که مستقیما قصد یادگیری همین مقاله را دارند باید بگوییم که تولتیپ به توضیحاتی گفته میشود که وقتی موس روی المانی میرود کادری باز میشود و نمایش داده میشود.

 

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

برای ساخت تولتیپ نیاز به انجام کار پیچیده ای نیست تنها کافیست شما دو خط جیکوئری را یاد بگیرید . قبل از هر چیز شما یاید بدانید که قابلیت تولتیپ را به هر تگی میتوانید بدهید ما در اینجا این قابلیت را به تگ  a داده ایم برای این کار کافیست attribute  با نام data-toggle و مقدار tooltip را به تگ خود بدهید همچنین با attribute با نام tittle میتوانید محتوای داخل تولتیپ را تعیین کنید قطعه کد جیکوئری را نیز در مثالی برای شما آورده ایم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

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

 

موقعیت نمایش tooltip

شما میتوانید تعیین کنید که تولتیپ در چه جهتی باز شود یعنی شما میتوانید تولتیپ خود را به صورت دستی در یکی از ۴ جهت اصلی باز کنید برای این کار ابتدا باید attribute با نام data-placement را بسازید و برای مقدار دهی به آن از لیست زیر کمک بگیرید:

  • top : اگر این مقدار را به data-placement خود بدهید تولتیپ در بالا باز میشود.
  • right: با دادن این مقدار به  data-placement تولتیپ به سمت راست باز میشود.
  • left : اگر مقدار left را به data-placement بدهید تولتیپ در جهت چپ باز میشود.
  • bottom : و در نهایت این مقدار تولتیپ در جهت پایین را میسازد.

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<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>

 

انیمیشن در تولتیپ

در حالت عادی به محض رفتن موس روی تولتیپ ، تولتیپ باز شده و به محض خروج موس از روی آن بسته میشود که یک ظاهر خشک و بی روح دارد اگر میخواهید حالت fade in و یا fade out را به تولتیپ خود بدهید کافیست از حالت انیمیشن استفاده کنید برای این کار باید در قسمت جیکوئری مقدار animation را اضافه کنید اگر مقدار انیمیشن را true قرار دهید انیمیشن فعال میشود و اگر false انیمیشن غیرفعال میشود برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div>
    <button class="btn btn-success">Hover over me (animation: true)</button>
    <button class="btn btn-warning">Hover over me (animation: false)</button>
  </div>


<script>
$(document).ready(function(){
  $('.btn-success').tooltip({title: "Hooray!", animation: true}); 
  $('.btn-warning').tooltip({title: "Hooray!", animation: false}); 
});
</script>

 

اختصاص دادن تولتیپ به یک container

قبل از هر چیز نحوه کاربرد این قسمت را توضیح میدهیم فرض کنید یک خط نوشته کوچک در یک کادر بزرگ دارید و میخواهید موس هر کجای این کادر رفت تولتیپ باز شود برای این حالت بهترین روش اختصاص دادن تولتیپ به container است برای این کار شما ابتدا باید یک div با کلاس مد نظر خود تعریف کنید و عبارت مد نظر خود را داخل آن بنویسید این عبارت میتواند یک تگ html باشد یا هر چیز دیگر سپس باید به کمک دستور container آن را در جیکوئری خود اضافه کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 <div class="parent">
    <button class="btn btn-success">Hover over me</button>
  </div>


<script>
$(document).ready(function(){
  $('.btn').tooltip({title: "Hooray!", container: ".parent"}); 
});
</script>delay

 

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

در حالت عادی به محض رفتن موس روی نوشته تولتیپ باز میشود و به محض خروج موس از نوشته تولتیپ بسته میشود اگر میخواهید این زمان را تغییر دهید باید از قابلیت delay در جیکوئری استفاده کنید اگر delay را به تنهایی بنویسید میتوانید یک مقدار عددی به صورت میلی ثانیه به آن بدهید اما اگر مقادیر show و hide را به آن بدهید میتوانید زمان نمایش و مخفی شدن متفاوت برای تولتیپ خود ایجاد کنید برای واضح شدن موضوع از هردو حات برای شما در کد زیر نمونه قرار داده ایم:

<button class="btn btn-success">Hover over me (1000ms)</button><br><br>
  <button class="btn btn-danger">Hover over me (500ms)</button>

<script>
$(document).ready(function(){
  $('.btn-success').tooltip({title: "Hooray!", delay: 1000}); 
  $('.btn-danger').tooltip({title: "Hooray!", delay: {show: 500, hide: 100}}); 
});
</script>

 

استفاده از تگ html در تولتیپ

در حالت عادی محتوایی که داخل تولتیپ نمایش داده مشود یک متن است اما شما میتوانید از تمام تگ های تعریف شده در html استفاده کنید برای اینکار باید در قسمت title جیکوئری تمام تگ های html را با محتوای مد نظرتان بنویسید سپس دستور html را برابر با true قرار دهید به همین راحتی میتوان تگ html را داخل تولتیپ نمایش داد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<button class="btn btn-success">Hover over me</button>

<script>
$(document).ready(function(){
  $('.btn').tooltip({title: "<h1><strong>HTML</strong> inside <code>the</code> <em>tooltip</em></h1>", html: true, placement: "bottom"}); 
});
</script>

 

تولتیپ و تغییر trigger

در حالت عادی با hover شدن موس روی المانی تولتیپ اجرا میشود اگر میخواهید این حالت را تغییر دهید به کمک trigger میتوانید ۳ حالت وجود دارد که شما میتوانید برای باز شدن تولتیپ انتخاب کنید:

  • hover : این حالت حالت پیش فرض است.
  • focus : در این حالت زمانی که شما روی المان کلیک میکنید و همچنان روی آن توجه دارید فعال است
  • click : وقتی روی المانی کلیک کنید تولتیپ باز میشود.

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div>
    <button class="btn btn-success">Click me</button>
    <button class="btn btn-warning">Hover over me</button>
    <button class="btn btn-danger">Focus (tab or click)</button>
  </div>

<script>
$(document).ready(function(){
  $('.btn-success').tooltip({title: "Hooray!", trigger: "click"}); 
  $('.btn-warning').tooltip({title: "Hooray!", trigger: "hover"}); 
  $('.btn-danger').tooltip({title: "Hooray!", trigger: "focus"}); 
});
</script>

 

برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
</head>

<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>


----------------------------------------------------------------------------
<div class="container">
  <h3>Tooltip Example</h3>
  <p>The data-placement attribute specifies the tooltip position.</p>
  <a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a>
  <a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a>
  <a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a>
  <a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a>
</div>

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

----------------------------------------------------------------------------
<div class="container mt-3">
  <h3>Tooltip Options</h3>
  <p>The <strong>animation</strong> option specifies whether to add a CSS fade transition effect to the tooltip.</p>
  <div>
    <button class="btn btn-success">Hover over me (animation: true)</button>
    <button class="btn btn-warning">Hover over me (animation: false)</button>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.btn-success').tooltip({title: "Hooray!", animation: true}); 
  $('.btn-warning').tooltip({title: "Hooray!", animation: false}); 
});
</script>


----------------------------------------------------------------------------
<div class="container mt-3">
  <h3>Tooltip Options</h3>
  <p>The <strong>container</strong> option appends the tooltip to a specific element.</p>
  <div class="parent">
    <button class="btn btn-success">Hover over me</button>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.btn').tooltip({title: "Hooray!", container: ".parent"}); 
});
</script>
----------------------------------------------------------------------------
<div class="container mt-3">
  <h3>Tooltip Options</h3>
  <p>The <strong>delay</strong> option specifies the number of milliseconds it will take to show and hide the 
  tooltip.</p>
  <p>This tooltip will take 1000 milliseconds to show when you hover over it, and 1000 milliseconds to hide on mouse leave.</p>
  <button class="btn btn-success">Hover over me (1000ms)</button><br><br>
  <p>This tooltip will take 500 milliseconds to show when you hover over it, and 100 ms to hide on mouse leave.</p>
  <button class="btn btn-danger">Hover over me (500ms)</button>
</div>

<script>
$(document).ready(function(){
  $('.btn-success').tooltip({title: "Hooray!", delay: 1000}); 
  $('.btn-danger').tooltip({title: "Hooray!", delay: {show: 500, hide: 100}}); 
});
</script>

----------------------------------------------------------------------------
<div class="container mt-3">
  <h3>Tooltip Options</h3>
  <p>The <strong>html</strong> option specifies whether to accept HTML tags in the tooltip.</p>
  <button class="btn btn-success">Hover over me</button>
</div>

<script>
$(document).ready(function(){
  $('.btn').tooltip({title: "<h1><strong>HTML</strong> inside <code>the</code> <em>tooltip</em></h1>", html: true, placement: "bottom"}); 
});
</script>

----------------------------------------------------------------------------

<div class="container mt-3">
  <h3>Tooltip Options</h3>
  <p>The <strong>trigger</strong> option specifies how the tooltip is triggered.</p>
  <div>
    <button class="btn btn-success">Click me</button>
    <button class="btn btn-warning">Hover over me</button>
    <button class="btn btn-danger">Focus (tab or click)</button>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.btn-success').tooltip({title: "Hooray!", trigger: "click"}); 
  $('.btn-warning').tooltip({title: "Hooray!", trigger: "hover"}); 
  $('.btn-danger').tooltip({title: "Hooray!", trigger: "focus"}); 
});
</script>
----------------------------------------------------------------------------



<br>
</body>
</html>

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

 

شما میتوانید ویدیو این آموزش را به صورت آنلاین ببینید:

 

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

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

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


این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip): نوع فایل:mp4 حجم فایل:35.42 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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