הצגת הסבר קצר כשמעבירים את העכבר מעל פריט

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

יצירת ההסבר הקצר

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

הוא גם מספק התנהגות של סגירה קלה, כך שכאשר משתמש לוחץ או מתמקד בדרך אחרת מחוץ לחלון הקופץ, החלון הקופץ נסגר.

רכיב ההסבר הקצר חייב לכלול מאפיין id עם ערך ייחודי:

<!-- MANDATORY: The tooltip container `<div>` must have a `popover` attribute.
     the value of `"hint"` ensures it can be "light dismissed". -->
<div popover="hint" id="tooltip">Tooltip content</div>

המשתמש מביע עניין במידע הנוסף על ידי העברת העכבר מעל רכיב <a> או <button> או העברת המיקוד אליו. לרכיב חייב להיות מאפיין interestfor שתואם למאפיין id של ההסבר הקצר.

<!-- The `interestfor` attribute can be applied to a `<button>` element: -->
<button interestfor="tooltip">Tooltip trigger</button>

<!-- The `interestfor` attribute can also be applied to an `<a>` element: -->
<a interestfor="tooltip" href="">Tooltip trigger</a>

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

נגישות מובנית ב-interestfor

כשמשתמשים ב-interestfor, הדפדפן מטפל בחיבור של הטכנולוגיה המסייעת:

• סמנטיקה משתמעת: יעד עם popover="hint" מקבל תפקיד מינימלי משתמע של tooltip. אל תגדירו את role="tooltip" בעצמכם.
• שיוך משתמע: הדפדפן משייך באופן משתמע את רכיב המקור ליעד באמצעות aria-describedby כשהיעד הוא טקסט פשוט, או באמצעות aria-details כשהיעד מכיל תוכן אינטראקטיבי. אל תוסיפו את aria-describedby או את aria-details לטריגר.
• תוכן אינטראקטיבי: מכיוון שהשיוך עובר אל aria-details לפי הצורך, היעד יכול להכיל תוכן אינטראקטיבי (למשל, קישור בתוך "כרטיס עניין").

אילוצי נגישות (WCAG 1.4.13)

גם אם interestfor מטפל בסמנטיקה שלמעלה, ההטמעה שלך עדיין חייבת לעמוד בדרישות של WCAG 1.4.13 (תוכן בהעברת העכבר או במיקוד):

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

מיקום ההסבר הקצר

המיקום של ההסבר הקצר נקבע באמצעות מיקום עוגן ב-CSS. כשפותחים את ההסבר הקצר באמצעות interestfor, רכיב הטריגר הופך באופן אוטומטי לעוגן משתמע של חלון ה-popover.

בדפדפנים מודרניים שתומכים במיקום עוגן מקורי, לא צריך להגדיר anchor-name בטריגר או position-anchor בהסבר הקצר. אפשר למקם את ההסבר הקצר ישירות ביחס לעוגן המשתמע שלו באמצעות position-area ולטפל בהיפוך ההתנגשות באמצעות position-try-fallbacks:

[popover] {
  /* Implicit anchor from interestfor: no anchor-name or position-anchor needed */
  position-area: top;
  position-try-fallbacks: flip-block;
  margin: unset;
}

אסטרטגיות חלופיות

תמיכה בדפדפנים וחלופות ל-Interest invokers

צריך להוסיף ל-Interest Invokers פוליפיל (polyfill) מותנה באמצעות חבילת הפוליפיל interestfor מ-NPM. עדיף להשתמש ב-polyfill כחלק מחבילה ולא ב-CDN.

חובה: מזהים את התכונה על ידי בדיקת המאפיין interestForElement ב-HTMLButtonElement.prototype, וטוענים את ה-polyfill רק כשאין תמיכה מקומית.

<script type="module">
  if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
    // CDN link only used for example, prefer bundling.
    await import("https://unpkg.com/interestfor@latest");
  }
</script>

אזהרות לגבי CSS Polyfill

כשמשתמשים ב-polyfill, ה-CSS API משתנה קצת כדי לפצות על היעדר התמיכה המקורית במאפיינים ובמחלקות פסאודו:

• מחלקה מדומה (Pseudo-class): ה-polyfill לא יכול להגדיר מחלקות מדומות אמיתיות של :interest-source ו-:interest-target, אז הוא מחיל במקומן מחלקות של .interest-source ו-.interest-target. חובה: צריך לשלב אותם עם :is() כדי לתמוך במצבים מקוריים ובמצבים עם polyfill.

/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }

• מאפייני CSS: ב-interest-delay, ב-interest-delay-start וב-interest-delay-end, ה-polyfill דורש שימוש במשתני CSS כי הוא לא יכול לקרוא את המאפיינים המותאמים אישית ישירות בכל הדפדפנים.

/* Adjust the start and end delay for interest invokers */
[interestfor] {
  --interest-delay-start: 0.2s;
  interest-delay-start: var(--interest-delay-start);
  --interest-delay-end: 0.1s;
  interest-delay-end: var(--interest-delay-end);
}

תמיכה בדפדפנים וחלופות ל-Popover

‫Popover API הוא בעיקר שיפור הדרגתי (progressive enhancement), אבל להתנהגויות שמגדירות אותו – קידום לשכבה העליונה, סגירה בלחיצה מחוץ לאלמנט והפעלה של popovertarget – אין מקבילה ב-CSS בלבד. בדפדפנים ישנים יותר צריך להשתמש ב-polyfill, או להגדיר חלופה ידנית אם אתם מעדיפים לא להשתמש ב-polyfill.

Polyfill: כדי לתמוך במאפיין popover בדפדפנים ישנים יותר, צריך לטעון את @oddbird/popover-polyfill באופן מותנה. חובה: צריך לזהות את התכונה על ידי בדיקת המאפיין popover ב-HTMLElement.prototype, ולטעון את ה-polyfill רק כשאין תמיכה מקומית – אל תטענו אותו ללא תנאי.

עם bundler או מפת ייבוא:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

בלי כלי לאריזת קוד, מייבאים מ-CDN בתוך <script type="module">:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

אזהרה לגבי סגנון: ה-polyfill לא יכול להגדיר את המחלקה המדומה :popover-open, אז הוא מחיל במקום זאת מחלקה .\:popover-open. חובה: צריך לשלב את שניהם עם :is() או :where(), אחרת דפדפנים שאין בהם :popover-open יתעלמו מהכלל כולו:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

לחלופין, כדי להשתמש ב-fallback מדור קודם בלי polyfill, אפשר להשתמש ב-position: fixed ולחשב קואורדינטות באופן ידני באמצעות getBoundingClientRect() או להסתמך על מיקום ברירת המחדל עם inset: auto אם זה מתאים לתרחיש לדוגמה.

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

כדי לתמוך בדפדפנים ללא מיקום עוגן, אפשר להשתמש ב-polyfill של @oddbird/css-anchor-positioning. לחלופין, אפשר להשתמש ב-@supports כדי לציין מיקום חלופי.

כשמשתמשים ב-polyfill של @oddbird/css-anchor-positioning לתמיכה בדפדפנים מדור קודם, חשוב לזכור שה-polyfill לא תומך בעוגנים משתמעים או ב-position-area בחלונות קופצים. מגדירים באופן מפורש את anchor-name בטריגר, מגדירים את position-anchor ב-popover וממקמים באמצעות פונקציות ה-inset של anchor() במקום position-area:

<!-- MANDATORY: Conditionally install the anchor positioning polyfill -->
<script type="module">
  if (!("anchorName" in document.documentElement.style)) {
    await import("https://unpkg.com/@oddbird/css-anchor-positioning");
  }
</script>

button[interestfor="tooltip-attrs"] {
  /* MANDATORY: Each trigger and popover pair must have a unique anchor name, referenced by `anchor-name` on the trigger and `position-anchor` on the popover. */
  anchor-name: --tooltip-attrs;
}
#tooltip-attrs {
  position-anchor: --tooltip-attrs;
  /* If using the anchor positioning polyfill with a popover, DO use `anchor()` functions, and not `position-area. */
  top: anchor(bottom);
  left: anchor(right);
  margin: unset;
}