در این جلسه از آموزش CSS نحوه ساخت Tooltip را آموزش داده ایم ، از Tooltip برای راهنمایی کردن کاربر استفاده می شود ، مثلاً اگر موس را بر روی یک عکس یا یک متنی بردید یه سری اطلاعات در مورد آن به ما نمایش دهد .
برای ساخت تولتیپ راه های زیادی وجود داره ولی ما در این فیلم آموزشی ساده ترین راه یعنی استفاده از HTML و CSS را انتخاب کرده ایم .
برای ساخت Tooltip شما می توانید از صفت title در HTML استفاده کنید که این ساده ترین راه ممکن است و وقتی این صفت را در یه عنصری استفاده می کنید وقتی موس را چند لحظه روی آن نگه دارید آن متنی که داخل title نوشته اید ، به شما نمایش داده خواهد شد .
ولی در این فیلم آموزشی ما از کلاس استفاده کرده ایم در دو جلسه آینده نحوه استایل دهی به صفت ها را هم به شما آموزش خواهیم داد که با آن آموزش می تونید به توضیحات داخل title هم استایل های خوبی بدید .
نحوه ساخت Tooltip :
برای ساخت تولتیپ باید اول اون متنر مورد نظر رو با استفاده از ویژگی visibility آن را پنهان کنیم و بعد وقتی که بر روی عنصر مورد نظر ما کلیک شد این متن نمایش داده شود ، به همین راحتی که گفتم .
برای ساخت تولتیپ کارهای زیر را انجام دهید :
کد HTML :
<!doctype html> <html> <head> <title>Web30ty</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="tooltip"> وب سیتی <span class="tooltip-text">سایت آموزش برنامه نویسی و طراحی سایت</span> </div> </body> </html>
کد CSS :
.tooltip{
width: 70px;
text-align: center;
display: inline-block;
margin: 300px;
border: 2px solid red;
position:relative;
}
.tooltip-text{
visibility: hidden;
width: 300px;
background-color: orange;
color: white;
font-size: 20px;
border-radius: 10px;
padding: 5px;
position:absolute;
top:-7px;
left: 105%;
}
.tooltip:hover .tooltip-text{
visibility: visible;
}
با استفاده از کد های بالا شما می توانید یک تولتیپ ساده درست کنید . حالا اگر خواستید جای Tooltip را عوض کنید یعنی آن را در سمت چپ نمایش دهید برای این کار کافیست که به جای ; left: 105% از ;right: 105% استفاده کنید .
برای بخواهید که تولتیپ را در بالای یه عنصر یا در پایین آن نمایش دهید یا یک تولتیپ بسیار حوب بسازید می توانید فیلم آموزش CSS را مشاهده کنید چون در این فیلم به خوبی این نکات آموزش داده شده است .
عااااااالی بود. خیلی ممنون..
سلام ادب و احترام خدمت استاد گرامی :
میخواستم به خاطر آموزش خوبتون از شما تشکر کنم .
نمونه هایی که در دنیای اینترنت وجود دارد به این سادگی که شما بیان کرده بود ارائه نداده بودند
موفق و سرافراز باشید.
سلام
خیلی ممنون نظر لطفتون هستش
فیلم آموزشی مربوط به این جلسه و جلسات قبل لینکش خرابه. لطفا درستش کنید.
چک میکنیم ممنون
البته ویدیو ها رو از آپارات نیز میتونید دانلود کنید
سلام عرض ارادت
من از وجود این سایت بینهایت متشکرم
فقط ای کاش به روز بود