کار با popover و tooltip در بوت استرپ | آموزش bootstrap

Tooltip در بوت استرپ چیست؟

tooltip ها به شکل های مختلفی دیده می شوند اما اکثر آن ها کادری مستطیل شکل یا مربع شکل اند که حاوی اطلاعاتی اضافی در مورد مسئله ی خاصی می باشند. این دسته از اطلاعات معمولا به صورت توضیحات اضافی هستند که نیازی به حضور آن ها در متن اصلی نیست. tooltip ها تنها زمانی نمایش داده می شوند که کاربر روی عنصر خاصی hover کند (موس را روی آن بیاورد).

برای ساخت tooltip در بوت استرپ باید به عنصر مورد نظرتان "data-toggle="tooltip را اضافه کنید. محتوای نمایش داده شده در tooltip هم باید در title ذکر شود:

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

نکته: tooltip ها باید توسط jQuery فعال شوند بنابراین عنصر مورد نظر خود را انتخاب کرده و متد ()tooltip را صدا بزنید. کد زیر تمام tooltip ها را در سند ما فعال می کند:

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

</body>
</html>

مشاهده ی خروجی در JSBin

البته باید توجه داشته باشید که به طور پیش فرض tooltip ها بالای عنصر مورد نظر نمایان می شوند و اگر بخواهید آن ها را در جهت دیگری نمایش دهید باید از data-placement استفاده کنید. به مثال زیر توجه کنید:

<!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>
</head>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

Popover چیست؟

Popover ها در واقع همان tooltip ها هستند اما دو تفاوت اصلی با tooltip ها دارند؛ اول آنکه معمولا باید روی آن ها کلیک شود تا چیزی نمایش دهند (نه hover) و دوم اینکه می توانند محتوای بیشتری بگیرند.

برای ساخت popover ها باید "data-toggle="popover را به عنصر مورد نظرتان اضافه کنید. ابتدا در title باید تیتر popover را بنویسید (قسمتی که بالای popover به نمایش در می آید) و در data-content متن اصلی مورد نظرتان را می نویسید:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

نکته: دقیقا مانند tooltip ها، popover ها نیز باید توسط jQuery فعال شوند. بنابراین عنصر مورد نظر خود را انتخاب کرده و متد ()popover را صدا بزنید. کد زیر تمام popover ها را در سند ما فعال می کند:

<!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>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

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

</body>
</html>

مشاهده ی خروجی در JSBin

popover ها باز هم مانند tooltip ها در بالای عنصر نمایش داده می شوند و اگر بخواهید موقعیت مکانی آن ها را تغییر دهید باید از data-placement استفاده کنید. به این مثال توجه کنید:

<!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>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
  <p>By default, the popover will appear on the right side of the element.</p>
  <p>Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element.</p>
  <p>Note: The placement attributes do not work if it is not enough room for them. For example, try to remove these paragraphs and click on the "Top" popover to understand how it works.</p>
  <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Top</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Bottom</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Left</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Right</a>
</div>

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

</body>
</html>

مشاهده ی خروجی در JSBin

نکته ی مهم: تعیین موقعیت مکانی، چه برای tooltip ها و چه برای popover ها، وابسته به فضای کافی است؛ به طور مثال اگر بگویید popover بالای عنصر نمایش داده شود اما بالای عنصر جایی برای نمایش popover وجود نداشته باشد، موقعیت مکانی به طور خودکار تغییر کرده و در سمت راست یا پایین نمایش داده می شود.

بستن popover ها

در حالت پیش فرض برای بستن یک popover باید دوباره روی آن کلیک کنید اما این موضوع معمولا برای کاربران ناخوشایند است و آن ها را آزار می دهد. بهتر است از "data-trigger="focus استفاده کنید تا اگر کاربر هر جای صفحه به غیر از خود popover کلیک کرد، popover بسته شود. مثال:

<!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>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
    <a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
</div>

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

</body>
</html>

مشاهده ی خروجی در JSBin

البته اگر می خواهید popover ها را مانند tooltip ها کنید تا تنها با hover نمایش داده شوند باید از data-trigger استفاده کنید. به این مثال دقت کنید:

<!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>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" title="Header" data-toggle="popover" data-content="Some content">Click Me</a><br>
  <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
</div>

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

</body>
</html>

مشاهده ی خروجی در JSBin

کار با Tooltip و Popover در بوت استرپ

Tooltip در بوت استرپ چیست؟

Popover چیست؟

بستن popover ها