tooltip ها به شکل های مختلفی دیده می شوند اما اکثر آن ها کادری مستطیل شکل یا مربع شکل اند که حاوی اطلاعاتی اضافی در مورد مسئله ی خاصی می باشند. این دسته از اطلاعات معمولا به صورت توضیحات اضافی هستند که نیازی به حضور آن ها در متن اصلی نیست. tooltip ها تنها زمانی نمایش داده می شوند که کاربر روی عنصر خاصی hover کند (موس را روی آن بیاورد).
برای ساخت tooltip در بوت استرپ باید به عنصر مورد نظرتان "data-toggle="tooltip را اضافه کنید. محتوای نمایش داده شده در tooltip هم باید در title ذکر شود:
|
|
<ahref="#"data-toggle="tooltip"title="Hooray!">Hover over me</a>
|
نکته: tooltip ها باید توسط jQuery فعال شوند بنابراین عنصر مورد نظر خود را انتخاب کرده و متد ()tooltip را صدا بزنید. کد زیر تمام tooltip ها را در سند ما فعال می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!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>
<ahref="#"data-toggle="tooltip"title="Hooray!">Hoveroverme</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
|
مشاهده ی خروجی در JSBin
البته باید توجه داشته باشید که به طور پیش فرض tooltip ها بالای عنصر مورد نظر نمایان می شوند و اگر بخواهید آن ها را در جهت دیگری نمایش دهید باید از data-placement استفاده کنید. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!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>
<ahref="#"data-toggle="tooltip"data-placement="top"title="Hooray!">Top</a>
<ahref="#"data-toggle="tooltip"data-placement="bottom"title="Hooray!">Bottom</a>
<ahref="#"data-toggle="tooltip"data-placement="left"title="Hooray!">Left</a>
<ahref="#"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 متن اصلی مورد نظرتان را می نویسید:
|
|
<ahref="#"data-toggle="popover"title="Popover Header"data-content="Some content inside the popover">Toggle popover</a>
|
نکته: دقیقا مانند tooltip ها، popover ها نیز باید توسط jQuery فعال شوند. بنابراین عنصر مورد نظر خود را انتخاب کرده و متد ()popover را صدا بزنید. کد زیر تمام popover ها را در سند ما فعال می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!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>
<ahref="#"data-toggle="popover"title="Popover Header"data-content="Some content inside the popover">Togglepopover</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
|
مشاهده ی خروجی در JSBin
popover ها باز هم مانند tooltip ها در بالای عنصر نمایش داده می شوند و اگر بخواهید موقعیت مکانی آن ها را تغییر دهید باید از data-placement استفاده کنید. به این مثال توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!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>Usethe data-placement attribute toset the position of the popover on top,bottom,left orthe right side of the element.</p>
<p>Note:The placement attributes donotwork ifit isnotenough room forthem.Forexample,trytoremove these paragraphs andclick on the"Top"popover tounderstand how it works.</p>
<ahref="#"title="Header"data-toggle="popover"data-placement="top"data-content="Content">Top</a>
<ahref="#"title="Header"data-toggle="popover"data-placement="bottom"data-content="Content">Bottom</a>
<ahref="#"title="Header"data-toggle="popover"data-placement="left"data-content="Content">Left</a>
<ahref="#"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 بسته شود. مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!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>
<ahref="#"title="Dismissible popover"data-toggle="popover"data-trigger="focus"data-content="Click anywhere in the document to close this popover">Clickme</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
|
مشاهده ی خروجی در JSBin
البته اگر می خواهید popover ها را مانند tooltip ها کنید تا تنها با hover نمایش داده شوند باید از data-triggerاستفاده کنید. به این مثال دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!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>
<ahref="#"title="Header"data-toggle="popover"data-content="Some content">Click Me</a><br>
<ahref="#"title="Header"data-toggle="popover"data-trigger="hover"data-content="Some content">Hoveroverme</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
|
مشاهده ی خروجی در JSBin
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟