میرممد

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

سید محمد میرعالی

امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.

دسته بندی مطالب آمار سایت
  • کل مطالب : 13
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • آی پی امروز : 14
  • آی پی دیروز : 11
  • بازدید امروز : 114
  • باردید دیروز : 17
  • گوگل امروز : 1
  • گوگل دیروز : 0
  • بازدید هفته : 226
  • بازدید ماه : 429
  • بازدید سال : 22,938
  • بازدید کلی : 22,938
  • آموزش استفاده از Tooltip در Bootstrap 4


    در اين مطلب از سايت ميرممد شما رو با كلاس Tooltip در بوتسترپ چهار آشنا ميكنم.وقتي كلاس Tooltip رو به يك المنت ميديم اگر موس رو روي آن المنت ببريم يك پاپ آپ مسيج كوچيك كنار المنت باز ميشه و ميتونيد پيام خودتونو توش به كاربر نشون بديد.يك نمونه دكمه ميذارم در پايين تا منظورمو خوب متوجه بشيد :

    دكمه تولتيپ دار

    همونطور كه ميبينيد وقتي روي دكمه بريد به شما پيغام نشون ميده كه بش ميگن تولتيپ.

     

    يك نمونه كد از تولتيپ در بوتسترپ:

    <a href="#" data-toggle="tooltip" title="متن پيام"> link </a>
    پس براي اضافه كردن تولتيپ بايد دو اتريبيوت  data-toggle و title رو به المنتمون اضافه كنيم كه پيام خودمونو در اتريبيوت title ميذاريم.
    براي اجرا شدن Tooltip بايد يك خط جي كوئري به سايتمون اضافه كنيم :
    <script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
    </script>
    كد بالا رو قبل از تگ <head/> اضاف كنيد.
    براي مشخص كردن موقعيت پيام نشون داده شده نيز از اتريبيوت data-placement استفاده ميكنيم :
    <a href="#" data-toggle="tooltip" data-placement="top" title="متن پيام!">link</a>    پيام در بالا
    <a href="#" data-toggle="tooltip" data-placement="bottom" title="متن پيام!">link</a>   پيام در پايين
    <a href="#" data-toggle="tooltip" data-placement="left" title="متن پيام!">link</a>   پيام در چپ
    <a href="#" data-toggle="tooltip" data-placement="right" title="متن پيام!">link</a>    پيام در راست
    خروجي كد هاي بالا :

    پيام در بالا

    پيام در پايين

    پيام در چپ

    پيام در راست

    اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد

    ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.



    پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :

    آموزش DocType در HTML 5

    صفحه بندی در Bootstrap 4

    آموزش کار با Progress Bar در Bootstrap 4

    آموزش کار با Badge در Bootstrap 4

    آموزش کار با Button در Bootstrap 4

    آموزش کار با Alerts در Bootstrap 4

    آموزش کار با Jumbotron در Bootstrap 4

    آموزش کار با جداول در Bootstrap 4

    آموزش استفاده از تگ video در HTML5

    آموزش كار با تصاوير در Bootstrap 4

    بازدید : 368 سه شنبه 17 مهر 1397 : 13:16 نظرات ()
    ارسال نظر برای این مطلب

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی