چگونه یک Tooltip در HTML ایجاد کنیم؟ نحوه ایجاد نکات ساده ابزار در CSS3.

از نویسنده: سلام. راهنمای ابزار یک متن توضیحی کوچک است که وقتی ماوس را روی یک عنصر، معمولاً یک تصویر، نگه می‌دارید ظاهر می‌شود. امروز به نحوه ساختن راهنمای ابزار در HTML به روش های مختلف خواهیم پرداخت.

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

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

ممکن است یک کلمه یا چند جمله وجود داشته باشد. و این چیزی است که به نظر می رسد:

اشاره به آرامی ظاهر می شود، نه بلافاصله پس از شناور شدن، بلکه پس از مدتی. این رفتار به طور پیش فرض است.

مشکل اصلی چنین ابزاری این است که نمی توان آن را سبک کرد. چگونه این مسئله را می توان حل کرد؟ ما باید به روش های دیگر اشاره کنیم. حالا من یک زوج را به شما نشان می دهم.

روشی بسیار جالب که به شما امکان می دهد به زیبایی یک اشاره برای یک تصویر نمایش دهید. نشانه گذاری HTML ساده است، فقط تصویر باید در یک محفظه بلوکی محصور شود، که ما یک شناسه به آن اختصاص می دهیم تا بعداً بتوانیم به آن در سبک ها مراجعه کنیم:

تنها چیزی که ممکن است در اینجا برای شما نامشخص باشد ویژگی data-name است. موضوع این است که این یک ویژگی به اصطلاح داده است که هیچ کاری را به تنهایی انجام نمی دهد، اما مقدار آن را می توان در css و javascript استفاده کرد که در برخی موارد آن را مفید می کند. این را در ادامه خواهید دید.

بنابراین، ابتدا اجازه دهید استایل های ظرف را شرح دهیم. ما به موقعیت نسبی نیاز داریم زیرا بلوک را کاملاً با متن توضیحی به گونه ای قرار می دهیم که موقعیت یابی نسبت به بلوک والد اتفاق بیفتد و نه کل صفحه.

#ببر( موقعیت: نسبی؛ نمایشگر: بلوک درون خطی؛ )

نمایش Block-line مانع از کشیده شدن بلوک (و همراه با آن بلوک با راهنمای ابزاری که ایجاد خواهیم کرد) در کل عرض پنجره می شود. تنها چیزی که باقی می ماند ایجاد خود اشاره است. در CSS انجام این کار با استفاده از شبه عناصر بسیار راحت است. مثل این:

#tiger:hover:after ( محتوا: attr(نام داده؛ موقعیت: مطلق؛ سمت چپ: 0؛ پایین: 0؛ پس‌زمینه: rgba(5,13,156,.55)؛ رنگ: #fff؛ تراز متن: مرکز ؛ خانواده فونت: خط شکسته؛ اندازه قلم: 14 پیکسل؛ بالشتک: 3 پیکسل 0؛ عرض: 100%؛ )

کدهای زیادی وجود دارد، اما هیچ چیز پیچیده ای در اینجا وجود ندارد. انتخابگر #tiger:hover:after به معنای زیر است: وقتی ماوس را روی یک بلوک با یک تصویر نگه می‌داریم، باید یک شبه عنصر بعد ایجاد کنیم (و سپس قوانین در پرانتزهای فرفری فهرست می‌شوند). ویژگی content: attr(data-name) مقدار متن بلوک را تنظیم می کند. برابر با چیزی است که در ویژگی data-name بلوک wrapper تصویر نوشته شده است.

این راهنمای ابزار زمانی که ماوس را روی تصویر می‌چرخانید ظاهر می‌شود، اما بر خلاف نمونه استاندارد، این کار را به طور ناگهانی انجام می‌دهد و ظاهر خود بلافاصله در لحظه نگه‌داشتن نشانگر ظاهر می‌شود. در این حالت، اجرای یک انتقال صاف امکان پذیر نخواهد بود، زیرا انتقال های صاف برای شبه عناصر پشتیبانی نمی شوند.

با این حال، با کمی بازنویسی کد، می‌توانید به ظاهری صاف و بدون استفاده از جاوا اسکریپت دست پیدا کنید.

برای مشاهده 2 افکتی که در ادامه به شما نشان خواهم داد، توصیه می کنم Notepad یا هر ویرایشگر کد مناسبی را باز کنید و همه چیز را بعد از من تکرار کنید. درست است، برای این کار شما هنوز باید یک فایل سبک اضافه کنید، اگرچه استایل ها را می توان به صورت html در تگ ها نیز نوشت

بنابراین، کد این مثال کمی متفاوت خواهد بود، و دلیل آن این است که ما از عنصر شبه استفاده نخواهیم کرد. به همین دلیل بود که اعمال تغییرات صاف غیرممکن بود. این بار کد به شکل زیر خواهد بود:

ببر سوماترا

کد CSS هیچ تغییر بزرگی را تجربه نکرده است:

#tiger2( موقعیت: نسبی؛ نمایشگر: بلوک درون خطی؛ ) #tiger2 .text ( انتقال: همه 0.6 ثانیه؛ کدورت: 0؛ موقعیت: مطلق؛ سمت چپ: 0؛ پایین: 0؛ پس‌زمینه: rgba(5،13،156،. 55)؛ رنگ: #fff؛ تراز نوشتاری: مرکز؛ فونت-خانواده: خط شکسته؛ اندازه قلم: 14 پیکسل؛ بالشتک: 3 پیکسل 0؛ عرض: 100%؛ تبدیل: scale(0)؛ ) #tiger2:hover .text (تاری: 1; )

ما فقط ویژگی محتوا را حذف می کنیم، زیرا فقط توسط عناصر شبه پشتیبانی می شود. ما ویژگی transition را اضافه می کنیم که انتقال حالت صاف را ایجاد می کند. خوب، opacity: 0 به بلوک راهنمای ابزار ما شفافیت کامل می دهد، بنابراین در صفحه قابل مشاهده نخواهد بود.

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

با استفاده از css3 می توانید یک عنصر را به روش دیگری مخفی کنید. برای مثال استفاده از تبدیل. شفافیت کامل را با این ویژگی جایگزین کنید: transform: scale(0) و اندازه بلوک به صفر کاهش می یابد، بنابراین به سادگی روی صفحه نمایش نخواهد بود. هنگامی که ماوس را روی یک بلوک با یک تصویر نگه می‌دارید، باید اندازه عادی را مانند این برگردانید: transform: scale(1). در این صورت جلوه ظاهری زیباتر به نظر می رسد. شما می توانید این را برای خودتان ببینید.

همانطور که می بینید، در css راهنمای ابزار نیز می تواند به آرامی با افکت های زیبا ظاهر شود.

jQuery می تواند حتی امکانات بیشتری به شما بدهد. با استفاده از این کتابخانه، می‌توانید کدی بنویسید تا یک اشاره را یا خودتان نمایش دهید یا افزونه‌ای را پیدا کنید که قبلاً این مورد را اجرا می‌کند.

برای مثال فریم ورک بوت استرپ نیز دارای کامپوننت های آماده بسیاری است که یکی از آنها Tooltips است. می‌توانید در اسناد چارچوب برای نمونه‌های کدی که به شما امکان می‌دهد همین نکات را ایجاد کنید و از آنها استفاده کنید، نگاه کنید. لازم نیست کل Bootstrap را به هم وصل کنید، به طور کلی می توانید فقط یک مؤلفه را به عنوان راهنمای ابزار بگذارید، فقط آن را دانلود و وصل کنید.

به طور کلی، امروز راه هایی را در CSS به شما نشان دادم تا یک Tooltip زیبا با ظاهری واضح و روان بسازید؛ علاوه بر این، Bootstrap و jQuery را در زرادخانه خود دارید. هر چیزی را انتخاب کنید و نکات جالب و زیبا را در سایت های خود پیاده کنید!

راهنمای ابزار HTML بلوکی با اطلاعات اضافی است که وقتی ماوس خود را روی یک عنصر خاص از یک صفحه وب می‌برید ظاهر می‌شود. امروز ما راهنمای ابزار خود را با استفاده از HTML و CSS ایجاد خواهیم کرد:

نمایش دمو | کد منبع را دانلود کنید

ما قادر خواهیم بود از نکات CSS برای اکثر عناصر مانند پیوندها، برچسب‌ها، متن سبک و غیره استفاده کنیم. ما باید چندین کلاس را به عنصر اعمال کنیم و یک ویژگی data- را با متن راهنمای ابزار اضافه کنیم.

ما باید یک سند HTML ایجاد کنیم و نشانه گذاری منبع را تنظیم کنیم:

Tooltips Demo // محتوا

من پیوندی به Normalize.css اضافه کرده ام که به بازنشانی همه سبک های مرورگر به حالت پیش فرض کمک می کند و تضمین می کند که هر عنصر در همه مرورگرها یکسان به نظر می رسد. برخلاف یک تنظیم مجدد CSS استاندارد، Normalize.css همه سبک های پیش فرض را حذف نمی کند، بنابراین شما مجبور نخواهید بود سبک هر عنصر را از ابتدا بازنویسی کنید.

من یک div با یک کلاس کانتینر ایجاد کرده‌ام که در آن نمونه‌های اولیه راهنمای ابزار HTML را قرار می‌دهیم. در اینجا استایل های بدنه و کلاس .container آمده است:

بدنه (فونت-خانواده: «Work Sans»، sans-serif؛ اندازه قلم: 1.5em؛ ارتفاع خط: 1.4em؛ وزن قلم: 700؛ رنگ پس‌زمینه: #28ABE3؛ رنگ: #fff؛ ) .container (عرض: 800 پیکسل؛ حاشیه: 100 پیکسل خودکار؛ پس‌زمینه: گرادیان شعاعی (دایره دورترین گوشه در 400 پیکسل 250 پیکسل، #64BBE0 0٪، #28ABE3، #28ABE3 95٪؛ )

با تنظیم حاشیه-چپ و حاشیه-راست روی خودکار، div ظرف را در مرکز قرار دادم. همچنین برای زیباتر جلوه دادن به قسمت بدنه استایلی اضافه کرده است.

تصمیم گرفتم یک گرادیان CSS سبک برای پس زمینه اضافه کنم. اگر مرورگر از گرادیان‌های CSS پشتیبانی نمی‌کند (این امر عمدتاً برای IE 8 و 9 اعمال می‌شود)، رنگ پس‌زمینه به آبی پیش‌فرض (رنگ پس‌زمینه بخش بدنه) برمی‌گردد.

من از نکات شناور HTML با تگ‌های لنگر استفاده می‌کنم، اما می‌توانید کلاس‌ها را به سایر عناصر درون خطی، مانند یک تگ قوی یا span اختصاص دهید. در زیر محتوای کانتینر div آمده است:

• پایین راهنمای ابزار
• راهنمای ابزار سمت چپ

  من دو کلاس به لینک ها اختصاص دادم. کلاس tooltip مسئول بدنه tooltip خواهد بود و کلاس دوم مکان آن را تعیین می کند.

  همچنین می‌توانید ویژگی سفارشی data- را ببینید که حاوی متن راهنمای ابزار HTML ما است.

  ایجاد کلاس tooltip

  در زیر کد کلاس tooltip آمده است:

  راهنمای ابزار ( موقعیت: نسبی؛ ) .tooltip:after ( موقعیت: مطلق؛ بالشتک: 8 پیکسل؛ حاشیه: 3 پیکسل ثابت #fff؛ شعاع حاشیه: 8 پیکسل؛ رنگ پس‌زمینه: #1FDA9A؛ اندازه قلم: 0.9em؛ وزن قلم : پررنگ؛ رنگ: #fff؛ محتوا: attr(data-tooltip)؛ حداقل عرض: 80 پیکسل؛ /* عرض: -moz-max-content؛ */ /* عرض: -webkit-max-content؛ */ opacity : 0؛ انتقال: همه .2s ease-in-out 0.25s؛ قابلیت مشاهده: پنهان؛ z-index: 2; ) .tooltip:hover:after ( opacity: 1; visibility: قابل مشاهده؛ )

  راهنمای ابزار شناور HTML خود یک عنصر شبه :after است و کاملاً در موقعیت قرار دارد. به همین دلیل است که لازم است یک موقعیت نسبی به عنصر لنگر اختصاص دهیم. من چند سبک اساسی مانند padding، حاشیه، اندازه فونت و عرض اضافه کردم. بیایید نگاهی دقیق تر به ویژگی محتوا بیندازیم.

  حاوی attr() - مقداری است که راهنمای داده سفارشی ما را ذخیره می کند و از آن برای نمایش متن خود راهنمای ابزار استفاده می کند. می توانید به جای data-tooltip از هر نام دیگری استفاده کنید، فقط مطمئن شوید که با data- شروع می شود. در اینجا می توانید در مورد این ویژگی ها بیشتر بدانید.

  بدنه راهنمای ابزار دارای حداقل عرض 80 پیکسل است. اگر می‌خواهید محتوای راهنمای ابزار به یک خط کشیده شود، مقدار max-content را برای ویژگی width اضافه کنید که در حال حاضر توضیح داده شده است. لازم به ذکر است که این یک ویژگی آزمایشی است، بنابراین باید از پیشوندهای فروشنده -webkit- و -moz- استفاده کنید.

  برای اینکه به HTML hover tooltip جلوه انیمیشن اسلاید بدهیم، از ویژگی transition استفاده می کنیم. به مقدار .25s توجه کنید که تاخیر قبل از نمایش یا پنهان شدن راهنمای ابزار را مشخص می کند. بنابراین، اگر به اشتباه ماوس را روی متن نگه دارید، نمایش داده نمی شود، اما تنها در صورتی که برای مدت زمان طولانی تری روی متن قرار بگیرید. Opacity را هم روی 0 و visibility را روی hidden قرار دادم. ما نمی توانیم از نمایش استفاده کنیم: ، زیرا عنصر به طور کامل ناپدید می شود و ما هیچ اثر انتقالی را مشاهده نخواهیم کرد. هنگامی که ماوس را روی یک عنصر با نشانگر ماوس نگه دارید، شفافیت و دید تغییر می کند.

  نتیجه:

  نگاه کن

  توجه: من برخی از نشانه گذاری ها و استایل های موجود در نسخه نمایشی CodePen را تغییر/حذف کردم. برای مشاهده نتیجه نهایی، نسخه ی نمایشی انتهای این مقاله را بررسی کنید.

  اضافه کردن حرکت

  اکنون که راهنمای ابزار HTML را که در شناور ظاهر یا ناپدید می‌شود، پیاده‌سازی کرده‌ایم، اجازه دهید آن را حرکت دهیم. ما قبلاً ویژگی انیمیشن را اختصاص داده ایم، تنها کاری که باید انجام دهیم این است که موقعیت شروع را از جایی که باید ظاهر شود و موقعیت پایانی را تنظیم کنیم:

  /*موقعیت اولیه راهنمای ابزار*/ .tooltip-top:after ( پایین: 150%؛ سمت چپ: 0; ) .tooltip-bottom:after (بالا: 155%؛ چپ: 0؛ ) .tooltip-left:after ( راست: 130%؛ حداقل عرض: 100 پیکسل؛ ) .tooltip-right:after ( چپ: 130%؛ حداقل عرض: 100px؛ ) /*موقعیت انتهای نوک*/ .tooltip-top:hover:after ( bottom: 120%; ) .tooltip-bottom:shover:after ( top: 125%; ) .tooltip-left:hover:after (راست: 110%; ) .tooltip-right:hover:after (چپ: 110%؛ )

  تصمیم گرفتم این قابلیت را به کلاس های اضافی اضافه کنم. بنابراین اگر به عنوان مثال کلاس .tooltip-left را اختصاص دهید، راهنمای ابزار در سمت چپ متن ظاهر می شود، اگر .tooltip-top را اضافه کنید، راهنمای ابزار در بالا ظاهر می شود و غیره.

  نمایش نسخه ی نمایشی

  در این دمو من از کلاس .tooltip-right استفاده می کنم. شما می توانید برای تعریف موقعیت های مختلف راهنمای ابزار HTML، کلاس های مختلف را آزمایش کرده و از آنها استفاده کنید.

  ایجاد مثلث

  آخرین عنصر راهنمای ابزار یک مثلث کوچک در یک طرف بلوک است. ما آن را با استفاده از کلاس :before ایجاد می کنیم (شبه کلاس :after قبلا برای خود راهنمای ابزار استفاده شده است). ما آن را به چهار کلاس موقعیت خود اختصاص می دهیم تا برای هر یک از آنها مثلث مطابق با آن خروجی شود:

  /** * مثلث */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before ( محتوا: ""؛ نمایش: بلوک؛ موقعیت: مطلق؛ مرز- عرض: 7 پیکسل؛ سبک حاشیه: جامد؛ رنگ حاشیه: rgba(0، 0، 0، 0)، کدورت: 0؛ انتقال: همه 0.2s ease-in-out 0.25s؛ دید: پنهان؛ .tooltip- top:hover:before, .tooltip-bottom:sover:fore, .tooltip-left:hover:before, .tooltip-right:hover:before ( کدورت: 1؛ دید: قابل مشاهده؛ )

  هنگامی که خود عنصر عرض یا ارتفاع ندارد، با دادن عرض به حاشیه، مثلثی ایجاد می کنیم. در این حالت عرض فریم روی 7 پیکسل تنظیم می شود. رنگ قاب کاملا شفاف است که بسیار مهم است. در قطعه کد زیر، رنگی را به ضلع مربوطه قاب اختصاص می دهم که به من اجازه می دهد شکل مثلث را تعریف کنم.

  بقیه استایل شبیه به آنچه برای بدنه راهنمای ابزار شناور HTML انجام دادیم به نظر می رسد. ما همان انتقال ها را داریم، موقعیت مطلق است، opacity روی 0 تنظیم شده است و قابلیت مشاهده پنهان است:

  /*موقعیت شروع مثلث*/ .tooltip-top:before (بالا: -51%؛ سمت چپ: 50%؛ تبدیل: translateX(-50%)؛ حاشیه-بالا-رنگ: #fff; ) .tooltip-bottom :before ( پایین: -56%؛ چپ: 50%؛ تبدیل: translateX(-50%)؛ حاشیه-پایین-رنگ: #fff; ) .tooltip-left:before ( چپ: -31%؛ بالا: 15% ؛ حاشیه -چپ-رنگ: #fff; ) .tooltip-right:before (راست: -31%؛ بالا: 15%؛ حاشیه-راست-رنگ: #fff; ) /* موقعیت انتهایی مثلث */ .tooltip -top:shover :before (بالا: -21%؛ ) .tooltip-bottom:hover:before ( پایین: -26%؛ ) .tooltip-left:hover:before ( چپ: -11%؛ ) .tooltip-right :hover:before (راست: -11%؛ )

  برای اینکه مثلث مانند راهنمای ابزار حرکت کند، باید یک موقعیت شروع و پایان را تعیین کنید.

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

  اخیراً وقتی در حال ساختن یک وبلاگ کوچک بودم، با وظیفه ساختن نکات ابزاری شیک و در عین حال ساده مواجه شدم. پس از امتحان روش‌های مختلف برای ایجاد کانتینرهای div جداگانه برای راهنمای ابزار، یا ایجاد راهنمایی‌های ابزار با CSS خالص، راه‌حلی جهانی پیدا کردم که کد را به هم نریزد، با مرورگرها سازگار باشد و در عین حال پیاده‌سازی آن بسیار ساده باشد.
  هر کسی که به روش من برای حل این مشکل ساده علاقه مند است، از زیر گربه می پرسم.

  راه حل روشی که به شما ارائه خواهم داد بسیار ساده و موثر است. در همه مرورگرها، حتی IE 6 (بارها توسط من تست شده) کار می کند. آسان برای تغییر و راحت. کد را به هم نمی ریزد و آن را واضح می کند. به راحتی می توان آن را مطابق با نیاز شما تغییر داد. برای مثال، نمایش یک راهنمای ابزار را با استفاده از setTimeout یا چیز دیگری به تأخیر بیندازید.
  لینک راهنمای ابزار
  همانطور که ممکن است قبلاً از لیست متوجه شده باشید، من از پیش پردازنده کمتر css استفاده می کنم.
  ما سبک ها و اسکریپت های CSS را در فایل های جداگانه قرار دادیم. ما همچنین یک پیوند و یک بلوک div داریم که محفظه راهنمای راهنمای ابزار خواهد بود.
  مشخصات HTML5 امکان استفاده از ویژگی‌های سفارشی از نوع داده‌ها را فراهم می‌کند که می‌تواند اطلاعاتی درباره یک عنصر یا بلوک ذخیره کند. در ویژگی های داده است که ما متن راهنمای ابزار را ذخیره می کنیم.
  ارتباط دادن
  برای ذخیره سازی از ویژگی data-tooltip استفاده می کنم.
  کار ما با HTML تمام شده است - می‌توانیم به سبک‌ها برویم. CSS من از کتابخانه LESS Elements استفاده می‌کنم و آن را به همه توصیه می‌کنم، بنابراین با استفاده از این فریم ورک برخی از ویژگی‌ها را می‌نویسم.
  @import "css/elements.less"؛ #tooltip ( z-index: 9999؛ موقعیت: مطلق؛ نمایش: هیچ؛ بالا: 0px؛ سمت چپ: 0px؛ پس‌زمینه رنگ: #000؛ padding: 5px 10px 5px 10px؛ رنگ: سفید؛ .opacity(0.5)؛ . گرد (5 پیکسل)؛ )
  از لیست مشخص است که در خط اول ما LE را متصل می کنیم، بلوک div#tooltip را روی موقعیت مطلق قرار داده و آن را پنهان می کنیم. سپس به بلوک یک رنگ پس‌زمینه و یک رنگ متن می‌دهیم، گوشه‌ها را گرد می‌کنیم (5 پیکسل) و مقدار شفافیت را روی 50% قرار می‌دهیم.
  $.jQuery(document).ready(function() ($("").mousemove(function (eventObject) ($data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "بالا" : eventObject.pageY + 5، "چپ": eventObject.pageX + 5 )) .show(); )).mouseout(function () ($("#tooltip ").hide() .text("") .css(( "بالا" : 0، "چپ" : 0 )); )); ));// پایان آماده است.
  اکنون همه عناصر با ویژگی data-tooltip را به انتخاب اضافه می کنیم و وقتی با ماوس روی عنصر مورد نظر می رویم، مقدار tooltip را دریافت می کنیم و آن را در یک متغیر ذخیره می کنیم. در مرحله بعد، متن راهنمایی را به بلوک #tooltip اضافه می کنیم، مختصات مکان نما را از لبه صفحه + 5 پیکسل به آن می دهیم و در نهایت بلوک را با راهنمای ابزار در جای مناسب نمایش می دهیم. پس از خروج ماوس از عنصر، بلوک #tooltip را پنهان می کنیم، محتویات آن را پاک می کنیم و آن را به 0;0; برمی گردانیم.

  همین!
  در نتیجه چیزی شبیه به این خواهیم داشت: دمو

  به لطف این اسکریپت ساده، تمام عناصر صفحه که دارای ویژگی data-tooltip هستند، یک راهنمای ابزار دریافت خواهند کرد.

  با تشکر از توجه شما!

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

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

  پیوند به منبع مفید

  بیایید سبک پایه را برای کلاس تنظیم کنیم راهنمای ابزار:

  نکته ابزار (نمایش: درون خطی؛ موقعیت: نسبی؛ )

  اکنون راهنمای ابزار در یک خط با پیوند با استفاده از موقعیت نسبی نمایش داده می شود. حالا بیایید گوشه های گرد را برای بلوک راهنمای ابزار تعریف کنیم و آن را در بالای پیوند قرار دهیم:

  نکته ابزار:hover:after( پس‌زمینه: #333؛ پس‌زمینه: rgba(0,0,0,.8؛ حاشیه: 5px؛ پایین: 26px؛ رنگ: #fff؛ محتوا: attr(عنوان؛ سمت چپ: 20 %؛ بالشتک: 5px 15px؛ موقعیت: مطلق؛ z-index: 98؛ عرض: 220px؛ )

  ما از شبه کلاس :hover استفاده می کنیم که وقتی ماوس روی آن قرار می گیرد عنصری را انتخاب می کند و از شبه کلاس :after که بعد از عنصر انتخاب شده محتوا را اضافه می کند. پس زمینه روی نیمه شفاف تنظیم شده است و برای مرورگرهایی که از فرمت رنگ RGBA پشتیبانی نمی کنند، رنگ پس زمینه را خاکستری می کنیم.

  گوشه های گرد با استفاده از ویژگی border-radius ایجاد می شوند. رنگ متن را روی سفید قرار دهید. در نهایت بلوک tooltip را قرار می دهیم و padding را اضافه می کنیم.

  علاوه بر تعریف سبک ها و موقعیت یابی، ویژگی content را نیز تنظیم می کنیم:

  محتوا: attr(title);

  این ویژگی به شما امکان می دهد محتوا را وارد کنید که می تواند یک رشته یا یک ویژگی عنصر باشد. در این حالت از ویژگی title لینک استفاده می کنیم.

  پیوند به منبع مفید

  برای تکمیل، باید یک فلش در پایین راهنمای ابزار اضافه کنید. ما از شبه کلاس:before و styles برای فریم استفاده می کنیم:

  نکته ابزار: شناور: قبل از (حاشیه: جامد؛ حاشیه-رنگ: #333 شفاف؛ عرض حاشیه: 6 پیکسل 6 پیکسل 0 6 پیکسل؛ پایین: 20 پیکسل؛ محتوا: ""؛ سمت چپ: 50٪؛ موقعیت: مطلق؛ شاخص z: 99 ;)

  برای ایجاد فلش، از ترفند حاشیه استفاده کردیم: رنگ حاشیه چپ و راست را شفاف کنید و عرض حاشیه را کنترل کنید. فلش نیز در زیر راهنمای ابزار قرار دارد.

  سلام خدمت دوستان عزیز. روز دیگر، یکی از مشتریان من با درخواست بهبود وب سایت خود به من مراجعه کرد. یا بهتر است یک فرم درخواست جدید در وب سایت ایجاد کنید، زیرا فرم قدیمی تغییر کرده است.

  او همچنین خواست تا یک راهنمای ابزار را به هر فیلد فرم وصل کند. احتمالاً چنین نکاتی را دیده‌اید: وقتی نشانگر ماوس را روی یک تصویر یا کلمه حرکت می‌دهید، یک راهنمای ابزار ظاهر می‌شود.

  البته گزینه های زیادی برای اجرای چنین نکاتی وجود دارد. به طور طبیعی، با تمرکز بر به حداقل رساندن بار روی سرور، تصمیم گرفتم با استفاده از HTML و CSS نکات ابزاری ایجاد کنم. این بسیار ساده است و به هیچ وجه سرور را بارگذاری نمی کند.

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

  مثال اجرای Tooltip

  نحوه ایجاد یک راهنمای ابزار

  بنابراین، کل فرآیند بیش از 5 دقیقه طول نمی کشد. ابتدا باید تصمیم بگیرید که شیئی که جلب توجه می کند چگونه خواهد بود. یعنی می‌تواند یک تصویر باشد، یک راهنمای ابزار ساده که با استفاده از سبک‌های CSS ایجاد شده است، به این شکل است. و به تصویر گره خورده است. یا .

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

  پیوند تصویر " alt="hint" />ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ !}

  اگر این یک کلمه یا عبارت است، باید این کد را در محلی که می‌خواهید راهنمایی نمایش داده شود، وارد کنید.

  متن نکته ابزار WORD

  اکنون باید استایل ها را در شیوه نامه CSS خود وارد کنید، در بیشتر موارد این فایل style.css است.

  پانل مدیریت WP - "Appearance" - "Editor" - "Style Sheet" را باز کنید و این سبک ها را در انتها وارد کنید.

  راهنما ( رنگ: #2C8505؛ طرح کلی: هیچ؛ /*رنگ راهنما*/ مکان نما: کمک؛ تزئین متن: هیچکدام؛ /*ظاهر مکان نما هنگام شناور شدن، می تواند با اشاره گر جایگزین شود*/ موقعیت: نسبی؛ /*موقعیت*/ ) /*موقعیت راهنمای ابزار*/ .Help span ( margin-left: -999em; position: absolute; ) /*tip tooltip*/ .help:span span ( font-family: Verdana, Tahoma, Geneva, sans-serif ;/ *فونت*/ موقعیت: مطلق؛ /*موقعیت*/ چپ: 10 پیکسل؛ بالا: 25 پیکسل؛ شاخص z: 99؛ حاشیه چپ: 0؛ عرض: 200 پیکسل؛ /*عرض بلوک راهنمای ابزار*/ ) /*پارامترها images*/ .help:hover img ( حاشیه: 0; ) /*tooltip block*/.airhelp ( پس زمینه: هیچکدام تکرار 0 0 rgba(97, 177, 255, 0.9)؛ /*رنگ پس زمینه و شفافیت*/ حاشیه : 1px solid #2b82b8؛ /*پارامترهای حاشیه*/ حاشیه-شعاع: 5px؛ /*گوشه های گرد*/ box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2)؛ /*box shadow*/ color : #fff; /*رنگ فونت راهنمای ابزار*/ padding: 5px; /*padding*/ )

  همانطور که می بینید، نکاتی را برای شما آماده کرده ام. تنها کاری که باید انجام دهید این است که تغییراتی را متناسب با طراحی خود ایجاد کنید و می توانید از نکات ابزار لذت ببرید. و اگر بازدیدکنندگان شما باید چیزی را پر کنند، در سایت ثبت نام کنند، یا اقداماتی را انجام دهند، شما فقط به نکاتی نیاز دارید. و بازدیدکنندگان شما از شما بسیار سپاسگزار خواهند بود.