דף זה תורגם על ידי Cloud Translation API.

חלון קופץ = hint

Keith Cirkel

Mason Freed

תאריך פרסום: 26 בפברואר 2025

ב-Chrome 133 נוספה תכונה חדשה לחלונות קופצים קיימים: popover="hint". המצב הזה, שמנוהל על ידי הדפדפן, מאפשר להשתמש בהקשר חדש של עריכת פריטים בערימה, שמפשט את היצירה של טיפים ותכונות דומות של פריטים צפים זמניים. היא מפחיתה את המאמץ של המפתחים תוך שמירה על גמישות העיצוב.

מבוא והיסטוריה

Popover API, שנוסף ב-Chrome 114, מאפשר ליצור ממשק משתמש צף נגיש, כמו תפריטים ותיאורי כלים. כברירת מחדל, ה-popover="auto" מטפל בפונקציונליות של סגירה קלה ובניהול המיקוד, בלי צורך בסקריפטים נוספים, כפי שמתואר במאמר הצגה של Popover API. כשפותחים חלון קופץ מסוג popover="auto", כל שאר החלונות הקופצים מסוג popover="auto" שלא שייכים לאותו הורה נסגרים. כך נוצר ממשק API ארגונומי שמבצע את הפעולה הכי הגיונית.

חלונות קופצים שסוגרים חלונות קופצים אחרים

<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>

בדוגמה הזו, פתיחת popover 2 תסגור את popover 1, כי הערך של popover="auto" מאפשר רק חלון קופץ אחד כזה להיות פתוח בכל פעם.

ההתנהגות הזו מתאימה לתפריטים ולתיבות דו-שיח, אבל היא עלולה ליצור בעיות כשצריך לשלב כמה סוגים של ממשק משתמש צף. לדוגמה, יכול להיות מצב שבו תפריט ותכונת עזרה שמשתמשות ב-popover="auto" ייכנסו ביניהם לעימות, כך שפתיחתה של תכונת העזרה תסגור את התפריט. זה אולי נראה מצב נדיר, אבל הוא קורה הרבה בממשק משתמש בסגנון אפליקציה מודרני. לדוגמה, בתפריטים שבכותרת של github.com נעשה שימוש בחלונות קופצים גם לתפריטים וגם להסברים הקצרים, כך ששניהם גלויים בו-זמנית בתנאים מסוימים:

אחת הדרכים לפתור את הבעיה היא להשתמש ב-popover="manual" לרכיבי ההסבר, שמאפשר שליטה מלאה בחלון הקופץ באמצעות סקריפטים. עם זאת, כדי לעשות זאת צריך להטמיע מחדש את התנהגות העריכה, סגירת החלון בקליק קל וניהול המיקוד – אלה בדיוק המשימות ש-Popover API נועד לטפל בהן. לכן, החלטנו לבדוק דרכים להרחיב את ה-API כדי לספק את הפונקציונליות החסרה.

במסגרת המחקר שלנו בקרב מפתחים, זיהינו שני הקשרים נפוצים של סטאקינג:

ממשק משתמש מתמיד: לדוגמה, תפריטים ותיבות דו-שיח.
ממשק משתמש זמני: לדוגמה, כרטיסי מידע והסברים קצרים.

כדי לאפשר את שניהם, הוספנו ל-popover="hint" סטאק שני, נפרד מ-popover="auto", כדי לוודא שהתפריטים יישארו פתוחים גם כשהסברונים מופיעים. במקום להציג כמה הקשרים של סטאקינג לסוגים שונים של ממשקי משתמש – מה שבעצם יהיה פיתוח מחדש של z-index – הגישה הזו שומרת על פשטות על ידי הגדרה של רק שתי קטגוריות רחבות: ממשק משתמש מתמיד (auto) וממשק משתמש זמני (hint). כך אפשר לשמור על איזון בין גמישות לבין הימנעות מהופעה חוזרת של אותן בעיות שהייתה לכם לפני השימוש בחלון קופץ.

ההתנהגות של הערך החדש

גם popover="auto" וגם popover="hint" תומכים בסגירה קלה, כלומר הם נסגרים באופן אוטומטי כשהמשתמש לוחץ מחוץ אליהם או מקשיב על Esc במקלדת. מבחינה זו, שני הסגנונות זהים.

כשמדובר בהסתרה בכפייה של חלונות קופצים אחרים, popover="auto" סוגר את כל החלונות הקופצים האחרים של auto ו-hint כשהוא נפתח, כדי לוודא שרק חלון קופץ אחד כזה פעיל בכל פעם (החריג היחיד הוא חלונות קופצים בתצוגת עץ, כפי שמוסבר בהמשך). לעומת זאת, popover="hint" מסתיר בכוח רק חלונות קופצים אחרים של hint, ומאפשר לתפריטים ולהסברים הקצרים להישאר פתוחים ול coexist.

ההבדל העיקרי ביניהן הוא בהתנהגות הקינון שלהן. popover="auto" אפשר להטמיע בתוך חלון קופץ הורה, כך שחלון קופץ צאצא יישאר פתוח בתוך חלון קופץ הורה אחר. ל-popover="hint" יש התנהגות קינון מיוחדת, וזה המקום שבו נכנסים "הערימות" הנפרדות. כשחלון קופץ מסוג hint נמצא בתוך חלון קופץ מסוג auto, הוא מצטרף לסטאק של auto כדי לשמור על קיבוץ לפי הקשר. כלומר, הוא יישאר פתוח עד שחלונות קופצים אחרים מסוג auto או hint יגרמו להסתרה שלו בכוח. כך תוכלו ליהנות מהתנהגות אינטואיטיבית, שבה חלוניות העזרה לא מפריעות לתפריטים אחרים או לחלוניות קופצות אחרות.

לסיום, לתרחישים לדוגמה שונים מאוד, תמיד יש את popover="manual", שלא כולל אף אחד מההתנהגויות האלה מובנית, ומאפשר לכם להגדיר את הפונקציונליות וההתנהגות המדויקות שאתם צריכים.

	`popover="auto"`	`popover="hint"`	`popover="manual"`
סגירה קלה	כן	כן	לא
אילוץ להסתרה:	`auto` ו-`hint` שאינם קשורים	`hint` לא קשורים	כלום
עריכה בתוך עריכה:	כן	מיוחד (כפי שמתואר למעלה)	לא רלוונטי – אין אפשרות לסגור את התראות האור

הפעלה על ידי העברת העכבר מעל

דפוס נפוץ של חוויית משתמש הוא הפעלה על ידי מעוף של כלי עזר ותגי מידע צפים. כשמעבירים את העכבר מעל רכיב מעניין למשך זמן מסוים, הכרטיס המרחף מוצג. בשלב זה, צריך להטמיע את ההתנהגות הזו באמצעות JavaScript, למשל על ידי הוספת מאזינים לאירועים mouseenter ו-mouseleave. עם זאת, אנחנו מפתחים ממשק API נוסף שיעזור לכם להגדיר באופן דקלרטיבי את ההפעלה של מודעות במצב 'החזקה מעל': Interest Invokers API.

ה-API הזה עדיין נמצא בתהליך פיתוח, אבל הרעיון הכללי הוא להוסיף מאפיין שנקרא interesttarget לסוגים רבים של רכיבים, כדי להעניק להם התנהגות שמופיעה כשעובר מעליהם העכבר:

<a interesttarget="my-hovercard" href="...">
  Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
  This is the hovercard
</span>

בעזרת ה-HTML הקודם, כשתעברו עם העכבר מעל הקישור <a> יוצג באופן אוטומטי חלון הקופץ my-hovercard. אם תעבירו את הסמן מהרכיב הזה, חלון הקופץ יוסתר. והכול בלי JavaScript!

דוגמאות

<button>An interesting button</button>
<div popover="hint">More info about the button</div>

[popover] {
  margin: 0;
  inset: auto;
  position-area: bottom right;
}

const button = document.querySelector('button');
const popover = document.querySelector('[popover]');

button.onmouseenter = () => {
  setTimeout(() => {
    popover.showPopover({source: button});
  }, 500);
}

button.onmouseleave = () => {
  setTimeout(() => {
    popover.hidePopover();
  }, 500);
}

כפתור עם הסבר קצר. — כדאי לנסות את התכונה הזו בשידור חי.

בדוגמה הזו נעשה שימוש ב-popover="hint" כדי ליצור תיאור כללי בסיסי, שמספק מידע נוסף על הכפתור כשעוברים מעליו עם העכבר. הגורמים המטפלים באירועים של mouseenter ו-mouseleave מספקים את ההפעלה במצב 'החזקה מעל' עם עיכובים פשוטים של 0.5 שניות. חשוב לזכור שיש כמה פרטים שלא מטופלים בדוגמה הזו:

החזקת העכבר מעל חלון הקופץ עצמו לא מונעת את סגירת החלון אם מעבירים את העכבר מעל רכיב ההפעלה. למשל, אי אפשר להעתיק או להדביק טקסט מהחלון הקופץ.
אין 'ביטול רטט': מעבירים את העכבר מעל הלחצן למשך חלקיק שנייה כדי להפעיל את חלון הקופץ, גם אם מעבירים את העכבר מעל הלחצן במהירות לפני שחלף זמן ההשהיה. במקרה כזה, תיאור הכלי 'יוצת' ונסגר במהירות.
הדוגמה לא נגישה בכלל: כל משתמש שלא משתמש בעכבר לא יכול לגשת לתוכן של ההסבר הקצר.

אפשר לפתור את הבעיות האלה באמצעות JavaScript נוסף. לדוגמה, כדי לתמוך בהפעלה של חלון קופץ באמצעות מקלדת, צריך להוסיף את focus (או אולי את keydown ו-keyup)). בפוסט המעולה הזה בבלוג של שרה היגליי מוסבר מה צריך לעשות כדי לוודא שההסבר הקצר נגיש. כל הבעיות האלה (ועוד) יטופלו באופן דקלרטיבי באופן אוטומטי על ידי Interest Invokers API.

למידע נוסף

פרטים נוספים זמינים בהסבר על התכונה או במפרט HTML.