دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » فیلم آموزش CSS – ساخت Tooltip با استفاده از CSS
فیلم آموزش CSS - ساخت Tooltip با استفاده از CSS

فیلم آموزش CSS – ساخت Tooltip با استفاده از CSS

در این جلسه از آموزش CSS نحوه ساخت Tooltip را آموزش داده ایم ، از Tooltip برای راهنمایی کردن کاربر استفاده می شود ، مثلاً اگر موس را بر روی یک عکس یا یک متنی بردید یه سری اطلاعات در مورد آن به ما نمایش دهد .

برای ساخت تولتیپ راه های زیادی وجود داره ولی ما در این فیلم آموزشی ساده ترین راه یعنی استفاده از HTML و CSS را انتخاب کرده ایم .

برای ساخت Tooltip شما می توانید از صفت title در HTML استفاده کنید که این ساده ترین راه ممکن است و وقتی این صفت را در یه عنصری استفاده می کنید وقتی موس را چند لحظه روی آن نگه دارید آن متنی که داخل title نوشته اید ، به شما نمایش داده خواهد شد .
ولی در این فیلم آموزشی ما از کلاس استفاده کرده ایم در دو جلسه آینده نحوه استایل دهی به صفت ها را هم به شما آموزش خواهیم داد که با آن آموزش می تونید به توضیحات داخل title هم استایل های خوبی بدید .

نحوه ساخت Tooltip :

برای ساخت تولتیپ باید اول اون متنر مورد نظر رو با استفاده از ویژگی visibility آن را پنهان کنیم و بعد وقتی که بر روی عنصر مورد نظر ما کلیک شد این متن نمایش داده شود ، به همین راحتی که گفتم .

برای ساخت تولتیپ کارهای زیر را انجام دهید :

کد HTML :

کد CSS :

با استفاده از کد های بالا شما می توانید یک تولتیپ ساده درست کنید . حالا اگر خواستید جای Tooltip را عوض کنید یعنی آن را در سمت چپ نمایش دهید برای این کار کافیست که به جای ; left: 105%  از ;right: 105%  استفاده کنید .

برای بخواهید که تولتیپ را در بالای یه عنصر یا در پایین آن نمایش دهید یا یک تولتیپ بسیار حوب بسازید می توانید فیلم آموزش CSS را مشاهده کنید چون در این فیلم به خوبی این نکات آموزش داده شده است .

فیلم آموزش نحوه ساخت Tooltip را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *