tooltip ها به شکل های مختلفی دیده می شوند اما اکثر آن ها کادری مستطیل شکل یا مربع شکل اند که حاوی اطلاعات اضافی در مورد عنصر خاصی می باشند. این دسته از اطلاعات معمولا به صورت توضیحات اضافی هستند که نیازی به حضور آن ها در متن اصلی نیست؛ به طور مثال توضیحاتی در مورد چیزی که اکثر کاربران سایت از آن خبر دارند اما ممکن است عده ی کمی هنوز درباره ی آن اطلاعی نداشته باشند. tooltip ها تنها زمانی نمایش داده می شوند که کاربر روی عنصر خاصی hover کند (موس را روی آن بیاورد).
یک مثال بسیار ساده از 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
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPEhtml>
<html>
<style>
.tooltip {
position:relative;
display:inline-block;
border-bottom:1pxdottedblack;
}
.tooltip .tooltiptext {
visibility:hidden;
width:150px;
background-color:black;
color:#fff;
text-align:center;
border-radius:6px;
padding:5px0;
/* tooltip موقعیت دهی به */
position:absolute;
z-index:1;
}
.tooltip:hover .tooltiptext {
visibility:visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">موسرارویاینعنصربیاورید
<span dir='rtl'class="tooltiptext">اینمتنtooltipمامیباشد</span>
</div>
<pdir='rtl'>توجهکنیدکهموقعیتtooltipماموقعیتمناسبینیست.درمثالهایبعداینمشکلراحلخواهیمکرد.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
بگذارید نحوه ی کد نویسی این مثال را مرور کنیم!
کدهای HTML: از یک عنصر به عنوان نگهدارنده (مثلا <div>) استفاده کنید و به آن کلاس tooltip بدهید. حالا زمانی که موس کاربر روی این عنصر (<div>) بیاید، متن tooltip نمایش داده می شود. متن tooltip خودمان را نیز باید در یک عنصر از نوع inline (مانند یک <span>) بنویسیم و به آن کلاس "class="tooltiptext را بدهیم.
کدهای CSS: کلاس tooltip از خاصیت position:relative استفاده می کند تا بتوانیم موقعیت متن tooltip را تنظیم کنید (خاصیت position:absolute). از طرفی کلاس tooltiptext نیز خودِ tooltip را نگه می دارد و در حالت پیش فرض مخفی (hidden) است مگر آنکه hover انجام شود. از طرفی برای آنکه tooltip ما ظاهر بهتری داشته باشد، آن را کمی استایل دهی کرده ایم (اضافه کردن width، اضافه کردن background color سیاه، متن سفید، در مرکز قرار دادن متن (centered) و اضافه کردن padding به اندازه ی 5 پیکسل). همچنین از خاصیت border-radius استفاده کرده ایم تا گوشه های tooltip را گِرد کنیم. در آخر هم از hover: استفاده کرده ایم تا اگر موس روی عنصر <div> با کلاس"class="tooltip رفت اتفاق خاصی انجام بگیرد.
موقعیت دهی tooltip در css
در مثال زیر، tooltip را در سمت راست (%left:105) متن اصلی (عنصر <div>) قرار داده ایم. سپس از خاصیتtop:-5px نیز استفاده کرده ایم تا آن را دقیقا در وسط عنصر نگهدارنده اش قرار دهیم (دلیل اینکه مقدارش را 5 گذاشته ایم، همان padding است که مقدارش 5 بود). بنابراین اگر مقدار padding را افزایش دادید، باید مقدار top را نیز افزایش دهید تا tooltip ما در وسط باقی بماند. ما در دو مثال زیر دو 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPEhtml>
<html>
<style>
.tooltip {
position:relative;
display:inline-block;
border-bottom:1pxdottedblack;
}
.tooltip .tooltiptext {
visibility:hidden;
width:120px;
background-color:black;
color:#fff;
text-align:center;
border-radius:6px;
padding:5px0;
/* Position the tooltip */
position:absolute;
z-index:1;
top:-5px;
left:105%;
}
.tooltip:hover .tooltiptext {
visibility:visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPEhtml>
<html>
<style>
.tooltip {
position:relative;
display:inline-block;
border-bottom:1pxdottedblack;
}
.tooltip .tooltiptext {
visibility:hidden;
width:120px;
background-color:black;
color:#fff;
text-align:center;
border-radius:6px;
padding:5px0;
/* Position the tooltip */
position:absolute;
z-index:1;
top:-5px;
right:105%;
}
.tooltip:hover .tooltiptext {
visibility:visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اما سوالی پیش می آید؛ اگر بخواهیم tooltip در بالا یا پایین (به جای چپ و راست) ظاهر شود چطور؟ ما برای این کار ازmargin-left استفاده کرده ایم و به آن مقدار 60 پیکسل داده ایم. واضح است که این کار برای قرار دادن tooltip در مرکز عنصر اصلی (متنی که hover می شود) است. این مقدار دقیقا نصف عرض tooltip ما است (120 تقسیم بر 2 مساوی است با 60). در دو مثال زیر 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPEhtml>
<html>
<style>
.tooltip {
position:relative;
display:inline-block;
border-bottom:1pxdottedblack;
}
.tooltip .tooltiptext {
visibility:hidden;
width:120px;
background-color:black;
color:#fff;
text-align:center;
border-radius:6px;
padding:5px0;
/* Position the tooltip */
position:absolute;
z-index:1;
bottom:100%;
left:50%;
margin-left:-60px;
}
.tooltip:hover .tooltiptext {
visibility:visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ایجاد 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPEhtml>
<html>
<style>
.tooltip {
position:relative;
display:inline-block;
border-bottom:1pxdottedblack;
}
.tooltip .tooltiptext {
visibility:hidden;
width:120px;
background-color:black;
color:#fff;
text-align:center;
border-radius:6px;
padding:5px0;
/* Position the tooltip */
position:absolute;
z-index:1;
top:100%;
left:50%;
margin-left:-60px;
}
.tooltip:hover .tooltiptext {
visibility:visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ایجاد arrow (پیکان) برای tooltip در css
احتمالا در دنیای مجازی دیده اید که اکثر tooltip ها دارای حالتی شبیه به یک پیکان هستند. برای ایجاد این حالت باید از شبه عنصر after:: به همراه خاصیت content استفاده کنیم (البته خود پیکان با border ایجاد می شود). به مثال زیر توجه کنید:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPEhtml>
<html>
<style>
.tooltip {
position:relative;
display:inline-block;
border-bottom:1pxdottedblack;
}
.tooltip .tooltiptext {
visibility:hidden;
width:120px;
background-color:black;
color:#fff;
text-align:center;
border-radius:6px;
padding:5px0;
position:absolute;
z-index:1;
bottom:150%;
left:50%;
margin-left:-60px;
}
.tooltip .tooltiptext::after {
content:"";
position:absolute;
top:100%;
left:50%;
margin-left:-5px;
border-width:5px;
border-style:solid;
border-color:blacktransparenttransparenttransparent;
}
.tooltip:hover .tooltiptext {
visibility:visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltipw/Bottom Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مثال بالا ابتدا پیکان را داخل tooltip قرار داده ایم؛ خاصیت top: 100% پیکان را در پایین tooltip قرار داده و left: 50% نیز آن را در وسط قرار می دهد. توجه داشته باشید که border-width اندازه ی این پیکان را مشخص می کند. بنابراین اگر آن را تغییر دادید، باید margin-left را نیز به همان مقدار تغییر دهید تا پیکان در وسط باقی بماند.
سپس از border-color استفاده کرده ایم تا محتوا را به پیکان تبدیل کنیم. بعد حاشیه ی بالا را به رنگ سیاه و بقیه را transparent (شفاف) قرار داده ایم. اگر تمام جهات را سیاه قرار می دادیم طرح نهایی به صورت یک مربع سیاه رنگ در می آمد. در مثال های زیر این پیکان را از جهت های مختلف قرار داده ایم.
پیکان از سمت بالا:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPEhtml>
<html>
<style>
.tooltip {
position:relative;
display:inline-block;
border-bottom:1pxdottedblack;
}
.tooltip .tooltiptext {
visibility:hidden;
width:120px;
background-color:black;
color:#fff;
text-align:center;
border-radius:6px;
padding:5px0;
position:absolute;
z-index:1;
top:150%;
left:50%;
margin-left:-60px;
}
.tooltip .tooltiptext::after {
content:"";
position:absolute;
bottom:100%;
left:50%;
margin-left:-5px;
border-width:5px;
border-style:solid;
border-color:transparenttransparentblacktransparent;
}
.tooltip:hover .tooltiptext {
visibility:visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltipw/Top Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
پیکان از سمت چپ:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPEhtml>
<html>
<style>
.tooltip {
position:relative;
display:inline-block;
border-bottom:1pxdottedblack;
}
.tooltip .tooltiptext {
visibility:hidden;
width:120px;
background-color:black;
color:#fff;
text-align:center;
border-radius:6px;
padding:5px0;
position:absolute;
z-index:1;
top:-5px;
left:110%;
}
.tooltip .tooltiptext::after {
content:"";
position:absolute;
top:50%;
right:100%;
margin-top:-5px;
border-width:5px;
border-style:solid;
border-color:transparentblacktransparenttransparent;
}
.tooltip:hover .tooltiptext {
visibility:visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltipw/Left Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
پیکان از سمت راست:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPEhtml>
<html>
<style>
.tooltip {
position:relative;
display:inline-block;
border-bottom:1pxdottedblack;
}
.tooltip .tooltiptext {
visibility:hidden;
width:120px;
background-color:black;
color:#fff;
text-align:center;
border-radius:6px;
padding:5px0;
position:absolute;
z-index:1;
top:-5px;
right:110%;
}
.tooltip .tooltiptext::after {
content:"";
position:absolute;
top:50%;
left:100%;
margin-top:-5px;
border-width:5px;
border-style:solid;
border-color:transparenttransparenttransparentblack;
}
.tooltip:hover .tooltiptext {
visibility:visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltipw/Right Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اضافه کردن انیمیشن
می توانید از قابلیت transition در زبان CSS استفاده کرده و آن را با خصوصیت opacity ترکیب کنید تا ظاهر شدن tooltip را با انیمیشن انجام دهید. در این حالت tooltip به آرامی از 0 درصد opacity به 100 درصد می رسد. ما در مثال زیر مقدار زمان مورد نظر را 1 ثانیه در نظر گرفته ایم:
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
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPEhtml>
<html>
<style>
.tooltip {
position:relative;
display:inline-block;
border-bottom:1pxdottedblack;
}
.tooltip .tooltiptext {
visibility:hidden;
width:120px;
background-color:black;
color:#fff;
text-align:center;
border-radius:6px;
padding:5px0;
position:absolute;
z-index:1;
bottom:100%;
left:50%;
margin-left:-60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity:0;
transition:opacity1s;
}
.tooltip:hover .tooltiptext {
visibility:visible;
opacity:1;
}
</style>
<body style="text-align:center;">
<h2>Fade InTooltip on Hover</h2>
<p>When you move the mouse over the text below,the tooltip text will fade inandtake1second togo from completely invisible tovisible.</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
پلاگین ها
این مقاله برای درک بهتر شما از نحوه ی کارکرد tooltip ها و همچنین افزایش مهارت کدنویسی شما در نظر گرفته شده است. پیشنهاد شخصی بنده این است که همیشه از پلاگین های جاوا اسکریپت tooltip برای کار با آن ها استفاده کنید. این پلاگین ها معمولا بسیار سبک و در عین حال بسیار پیشرفته هستند، در حالی که پلاگین مطرح شده دراین مقاله بسیار ابتدایی است.
یکی از این پلاگین های قدرتمند، پلاگین tippyjs می باشد که می توانید با مراجعه به وب سایت آن، در مورد نحوه ی استفاده و کار با آن اطلاعات کافی را کسب کنید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟