چگونه یک راهنمای ابزار CSS چسبناک بسازیم (با کمی جاوا اسکریپت)

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

اینم محصول نهایی:

1. ایجاد نشانه گذاری HTML

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

1

  <div class="tooltip-area">

2

    <h1>What is a tooltip?</h1>

3

    <div id="tooltip" role="tooltip">

4

      Hi! I'm a tooltip. I provide additional information about elements without cluttering the page.

5

    </div>

6

  </div>

نمایش راهنمای ابزار فقط توسط CSS انجام می شود و نسبتاً ساده است. ما به راهنمای ابزار به‌طور پیش‌فرض استایل می‌دهیم که پنهان شود و تنها زمانی نمایش داده شود که ناحیه راهنمای ابزار روی آن قرار گرفته باشد.

1

#tooltip {

2

  opacity: 0;

3

}

4

5

.tooltip-area:hover #tooltip {

6

  opacity: 1;

7

}

این تمام استایل مورد نیاز برای کنترل نمایش راهنمای ابزار است. ما می توانیم CSS بیشتری را برای اهداف طراحی اضافه کنیم.

1

.tooltip-area {

2

  width: 50%;

3

  min-width: max-content;

4

  max-height: 75vh;

5

  max-width: 75vh;

6

  aspect-ratio: 1;

7

  box-sizing: border-box;

8

  padding: 18px 12px;

9

  display: flex;

10

  align-items: center;

11

  justify-content: center;

12

  background-color: white;

13

}

14

15

.tooltip-area h1 {

16

  text-align: center;

17

}

18

19

#tooltip {

20

  position: absolute;

21

  height: fit-content;

22

  max-width: 250px;

23

  padding: 12px;

24

  background-color: #FFFAA0;

25

  top: 0;

26

  left: 0;

27

  opacity: 0;

28

  pointer-events: none

29

}

30

31

.tooltip-area:hover #tooltip {

32

  opacity: 1;

33

}

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

این چیزی است که ما تا کنون داریم:

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

ما موقعیت را برای راهنمای ابزار خود با استفاده از clientX و مشتری رویدادهای موش

بیایید تابعی ایجاد کنیم که به‌روزرسانی موقعیت راهنمای ابزار CSS را انجام دهد. ابتدا عنصر tooltip را دریافت می کنیم:

1

const tooltip = document.getElementById("tooltip");

و سپس ما موقعیت آن را در به روز می کنیم updateTooltipPosition() تابع

1

const updateTooltipPosition = (event) => {

2

  tooltip.style.top = `${event.clientY}px`;

3

  tooltip.style.left = `${event.clientX}px`;

4

};

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

1

const updateTooltipPosition = (event) => {

2

  if (tooltip.offsetHeight + event.clientY < window.innerHeight) {

3

    tooltip.style.top = `${event.clientY}px`;

4

  }

5

6

  tooltip.style.left = `${event.clientX}px`;

7

};

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

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

ما HTML خود را به‌روزرسانی می‌کنیم تا تابع خود را به شنونده رویداد، به صورت درون خطی در عنصر ناحیه راهنمای ابزار خود، متصل کنیم:

1

  <div class="tooltip-area" onpointermove="updateTooltipPosition(event)">

نتیجه

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