دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۴
  • مرداد

جلسه ۲۷ : ویژگی Tooltip در Bootstrap 4

  • دسته‌بندی‌ها :
جلسه ۲۷ : ویژگی Tooltip در Bootstrap 4
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 4 ، را دنبال می کنند. در زمانی که وب سایتهای مختلف را بررسی می کنید،اگر دقت کرده باشید وقتی اشاره گر ماوس را روی هر کدام از عناصر html وب سایت از جمله Button می برید یک پیغام راهنما ی کوچک در پایین همان عنصر،ظاهر می شود،که Tooltip نامیده می شود. در این بخش چگونگی ایجاد این پیغام راهنما در Bootstrap 4 را به همراه چگونگی تغییر قالب و فرمت آن، ارائه خواهیم داد. در ادامه ی این آموزش به منظور آشنایی با ویژگی Tooltip در Bootstrap 4 و طرز استفاده از آن، با ما همراه باشید.

      ویژگی Tooltip در Bootstrap 4

      Tooltip برای نمایش یک پیغام راهنما در حاشیه یا لبه ی عناصر html، زمانیکه کاربر اشاره گر ماوس را روی آن می برد، استفاده می شود.

       

      ویژگی Tooltip در Bootstrap 4

      ویژگی Tooltip در Bootstrap 4

      چگونگی ایجاد پیغام راهنما در Bootstrap 4

      برای ایجاد یک tooltip در هر عنصر html، کلاس data-toggle="tooltip" را به آن عنصر، اضافه کنید:

      از کلاس title نیز برای افزودن متن پیغام راهنما ، استفاده کنید:

      مثال : 

      نکته: برای استفاده از tooltip ،کدهای jQuery نیز، لازم است: عنصر مورد نظر را انتخاب کرده و تابع ()tooltip را فراخوانی کنید:

      مثال کد jQuery زیر، ویژگی tooltip را در عنصر مربوطه، فعال می کند:

      مثال : 

      محل ظاهر شدن tooltip

      برای تعیین محل ظاهر شدن پیغام راهنما در عناصر html، از لیست کدهای زیر استفاده کنید:

      مثال : 

      کلام آخر

      با یادگیری مباحث این بخش، می توانید برای تمام عناصر html صفحه وب خود، از tooltip استفاده کنید تا کاربران از عملکرد هر بخش از صفحه وب شما آگاهی داشته باشند و دچار سردرگمی نشوند. امیدواریم که از مباحث آشنایی با ویژگی Tooltip در Bootstrap 4 نهایت استفاده را برده باشید.

      QR:  جلسه ۲۷ : ویژگی Tooltip در Bootstrap 4
      به اشتراک بگذارید