در خدمت شما هستیم با آموزش Bootstrap جلسه سی و یکم (Tooltip)
آموزش Bootstrap جلسه سی و یکم (Tooltip) از سری آموزش های تک قسمتی است
سلام برنامه در آموزشی دیگر نحوه ساخت تولتیپ را آموزش داده بود
در این آموزش نحوه ساخت تولتیپ با کلاس های بوت استرپ را آموزش می دهیم
برای آن دسته از دوستان که نمی دانند تولتیپ چیست
تولتیپ کادری است که وقتی موس روی عبارتی میرود باز می شود و توضیحاتی راجع به عبارت می دهد
تولتیپ را می توان روی متن ، روی لینک و روی تصویر قرار داد
در این آموزش از آنجایی که از بوت استرپ استفاده می کنیم تولتیپی کاملا رسپانسیو می سازیم
برای اجرای تولتیپ ما باید فایل tooltip.js و یا فایل bootstrap.js را در قالب خود بارگیری کنیم توجه داشته باشید هر دو فایل با هم نباید اجرا شوند استفاده از یکی کافیست.
تولتیپ (tooltip)
همانطور که قبل گفتیم از تولتیپ ها برای توضیحات اضافه استفاده میشود از آنجایی که تنها با قرار گرفتن موس روی المان نمایش داده میشوند در صفحه های اضافی نمیگیرند و بسیار مناسب هستند در حالت عادی و بدون بوت استرپ برای ساخت تولتیپ از دستورات before و after در css استفاده میکنیم که دردسر های خود و تسلط کافی به html و css را لازم دارد اما در بوت استرپ به راحتی میتوانید این کار را انجام دهید.
برای ساخت تولتیپ نیاز به استفاده از attribute با نام data-toggle داریم که به خود مقدار tooltip را میگیرد معمولا برای المانی که نیاز به تولتیپ دارد از تگ a استفاده میکنیم و برای آن title قرار میدهیم متن قرار گرفته در title هما متن نمایشی تولتیپ ما است. بعد از اجرا این موارد نیاز است قطعه کد جیکوئری را نیز فراخوانی کنیم کل موارد گفته شده در کد زیر موجود است که میتوانید از آن استفاده کنید:
<!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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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>
همانطور که در کد بالا مشخص است مقادیر قرار گرفته در script باز و بسته کد جیکوئری لازم برای اجرای تولتیپ است . تنها با اختصاص دادن attribute تولتیپ میتوان این مورد را ایجاد کرد.
جهت نمایش تولتیپ
در حالت پیشفرض متن تولتیپ ما در بالای نوشته نمایش داده میشود که این مورد همیشه قابل استفاده نیست گاهی بنا به نیاز و شرایط قالب ما لازم است که تولتیپ در جهتی دیگر باز شود پس در این شرایط باید از data-placement استفاده کنیم و مقدار های top و bottom و left و right به آن بدهیم. بنا به نیاز میتوان در هر کدام از چهار جهت این کار را انجام داد برای واضح شدن موضوع از کد زیر کمک بگیرید.
<!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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<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>
</html>
ما در کد بالا هر چهار جهت را برای شما قرار دادیم تا از آن استفاده کنید.
شخصی سازی تولتیپ
همانطور که میبینید در تمام کد ها ظاهر تولتیپ ثابت است و با استایل دادن معمولی تغییر نمیکند حتی اگر شما به after و before تگ خود هم استایل بدهید امکان تغییر ظاهر تولتیپ وجود ندادر شما ۲ راه دارید:
- استایل دادن از طریق جیکوئری
- استایل دادن به attr های تولتیپ در css
مورد دوم بسیار ساده تر است و ما به ورت اختصاصی در سلام برنامه به آن میپردازیم روشی ساده که ما به شما میگوییم این اسن که تنها به کلاسی با نام tooltip-inner استایل بدهید این کلاس اختصاصی تولتیپ است توجه کنید فقط این کلاس و نه کلاس tooltip اگر میخواهید پیکان تولتیپ را نیز تغییر دهید از کلاس tooltip-arrow بعد از کلاس tooltip-top استفاده کنید توجه کنید top باید جهت تولتیپ استفاده شده شما باشد.
برای واضح تر شدن موضوع نمونه کدی را برای شما آماده کردیم کد زیر شامل توضیحات گفته شده است:
<!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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
/* Tooltip */
.container{
margin-top:50px;
}
.tooltip-inner {
background-color: #73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.tooltip.right .tooltip-arrow {
border-right: 5px solid red;
}
}
</style>
</head>
<body>
<div class="container">
<ul class="list-inline">
<li><a class="test" href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">right</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه سی ام (Modal)
آموزش Bootstrap جلسه سی و دوم (Popover)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
و یا آن را در آپارات ببینید:
آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)
آموزش Bootstrap 4 جلسه دوم (start)
آموزش Bootstrap جلسه پایانی (Design Template)