در این مقاله از آموزش CSS به ساخت یک Tooltipدر CSS می پردازیم.می دانیم که Tooltip برای نمایش یک پیام خاص به کاربر مورد استفاده قرار می گیرد.
نحوه ساخت Tooltip در CSS
برای ساخت یک Tooltip لازم است مقاله مربوط به آشنایی با position ها در CSS را بخوانید.این مقاله مثالی کاربردی برای تمرین بیشتر در آموزش CSS خواهد بود که به شما کمک می کند دستورات آموزش داده شده را بهتر مسلط شوید و عمیق تر درک نمایید.
<style>
/* Tooltip container */
.tooltip {
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
position: relative;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* Tooltip text */
.tooltip .tooltiptext {
width: 120px;
visibility: hidden;
background-color: brown;
color: #fff;
padding: 7px 0;
border-radius: 8px;
text-align: center;
position: absolute;
z-index: 2;
}
</style>
<div class="tooltip">mouse hover here
<span class="tooltiptext">Tooltip text is here.</span>
</div>
کدهای بالا نحوه ساخت یک tooltip را در CSS آموزش می دهد.در مثال بالا با استفاده از یک تگ div و کلاس اختصاص داده شده به ان،این tooltip ساخته شده است.در مورد استفاده از کلاس ها در CSS در مقالات گذشته توضیح داده شد.خاصیت border-radius در CSS وظیفه انحنا بخشیدن به اطراف عنصر را دارد.از اینرو جهت زیبایی ظاهری خروجی کار، به اندازه کمی border-radius اختصاص داده شده است.عرض یا width این tooltip را برابر با 120 پیکسل قرار داده ایم.در مورد اینکه چرا برای ساخت این tooltip از پوزیشن absolute استفاده شده ،به مقاله مربوطه آموزش انواع پوزیشن ها در CSS مراجعه نمایید.همانطور که مطرح شده بود ،پوزیشن absolute یکی از پرکاربردترین نوع پوزیشن ها در CSS محسوب می شود.لذا لازم است با کاربرد آن بیشتر آشنا شویم.دستور border-bottom جهت ایجاد کادر در پایین اضافه شده است.در این دستور CSS ،توجه نمایید که به صورت مخفف ، ضخامت و رنگ بندی و نوع کادر (dotted) مشخص شده است که کادر را به صورت نقطه نقطه در پایین این عنصر قرار می دهد.می توانید از این کد برای ایجاد tooltip استفاده نمایید.توجه کنید که برای ایجاد یک tootip واقعی بهتر است از جاوااسکریپت هم استفاده نمایید.هرچند با استفاده از CSS می توان این tooltip را ایجاد کرد اما با استفاده از جاوااسکریپت ابزارها و امکانات نسبتا بیشتری برای ساخت tootip در css در اختیار ما قرار خواهد گرفت.طی چندین مقاله قصد داریم آموزش مقدماتی و پیشرفته CSS را دنبال کنیم.در صورتی که به آموزش جوملاعلاقه مند هستید کلیک کنید.
سایت بزرگ کلیک سایت،بهترین مرجع در ضمینه آموزش طراحی سایت و آموزش html و آموزش css میباشد.تمامی فیلم های آموزشی این سایت توسط استادان کاردان و بسیار با تجربه تهیه شده که تضمینی بر کیفیت بالای تمامی آن ها است.قیمت محصولات نیز کاملا رقابتی بوده و با مقایسه آن با سایر سایت ها میتوان به خوبی متوجه این موضوع شد.
هیچ نظری موجود نیست:
ارسال یک نظر