การสร้างทัวร์ชมแอปแบบถาวร

ทัวร์แนะนำการเริ่มต้นใช้งานต้องมีภาพซ้อนทับที่คงอยู่ขณะที่ผู้ใช้โต้ตอบกับฟีเจอร์ที่ไฮไลต์ ป๊อปโอเวอร์แบบแมนนวลจะแตกต่างจากป๊อปโอเวอร์แบบอัตโนมัติ โดยจะไม่ปิดเมื่อผู้ใช้คลิกที่อื่นในหน้าเว็บ การรวม popover="manual" เข้ากับการกำหนดตำแหน่ง Anchor ของ CSS ช่วยให้คุณสร้างขั้นตอนทัวร์ชมที่เชื่อมโยงกันแบบไม่ใช่โมดัลได้

การติดตั้งใช้งานที่แนะนํา

HTML

<div id="feature-target">Highlight this feature</div>

<!-- MANDATORY: Enforce overlay dialog semantics and accessible name bindings -->
<div id="tour-step" popover="manual" role="dialog" aria-labelledby="tour-title">
  <!-- Assume an <h1> precedes this element in the full document outline -->
  <h2 id="tour-title">Step 1</h2>
  <p>Learn how to use this feature.</p>
  <button popovertarget="tour-step" popovertargetaction="hide">Got it</button>
</div>

CSS

#feature-target {
  anchor-name: --feature-target;
}

#tour-step {
  popover: manual;
  position-anchor: --feature-target;
  position-area: right center;
  inset: auto;
  margin: 1rem;
  padding: 1rem;
  border: 1px solid blue;
  border-radius: 0.5rem;
  background: aliceblue;
}

JavaScript

const tourStep = document.getElementById('tour-step');
tourStep.showPopover();
// MANDATORY: Programmatically route focus into the non-modal popover so keyboard/assistive technology users immediately perceive the new context
tourStep.querySelector('button').focus();

หลักเกณฑ์การใช้งาน

• บังคับ: ใช้ popover="manual" เพื่อป้องกันไม่ให้ขั้นตอนของทัวร์ปิดโดยไม่ตั้งใจระหว่างการโต้ตอบของผู้ใช้
• บังคับ: ทำเครื่องหมายคอนเทนเนอร์ด้วย role="dialog" และลิงก์ส่วนหัวผ่าน aria-labelledby
• บังคับ: เปลี่ยนโฟกัสแบบเป็นโปรแกรมภายในป๊อปโอเวอร์ทันทีหลังจากเปิดเพื่อป้องกันไม่ให้โฟกัสถูกละทิ้ง
• ควรใช้การกำหนดตำแหน่ง Anchor ของ CSS เพื่อเชื่อมโยงขั้นตอนของทัวร์ชมกับฟีเจอร์ที่เฉพาะเจาะจงซึ่งกำลังอธิบายอยู่
• ควรมีปุ่ม "ปิด" หรือ "ถัดไป" ที่ชัดเจนภายในป๊อปโอเวอร์ที่ใช้ popovertargetaction="hide"

กลยุทธ์สำรอง

การรองรับเบราว์เซอร์และทางเลือกสำรองสำหรับ Popover

Popover API ส่วนใหญ่เป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง แต่ลักษณะการทำงานที่กำหนดไว้ เช่น การโปรโมตเลเยอร์บนสุด การปิดเมื่อคลิกนอกองค์ประกอบ และการเรียกใช้ popovertarget ไม่มี CSS ที่เทียบเท่า เบราว์เซอร์รุ่นเก่าต้องใช้ 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");
}

หากไม่มี Bundler ให้นำเข้าจาก 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 แทน จำเป็น: รวมทั้ง 2 รายการเข้าด้วยกันโดยใช้ :is() หรือ :where() ไม่เช่นนั้นเบราว์เซอร์ที่ไม่มี :popover-open จะทิ้งกฎทั้งหมด

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

หรือสำหรับทางเลือกสำรองแบบเดิมที่ไม่มี Polyfill ให้ใช้ position: fixed และคำนวณพิกัดด้วยตนเองผ่าน getBoundingClientRect() หรือใช้การกำหนดตำแหน่งเริ่มต้นด้วย inset: auto หากยอมรับได้สำหรับกรณีการใช้งาน

anchor-positioning

หากต้องการรองรับเบราว์เซอร์ที่ไม่มีการกำหนดตำแหน่ง Anchor คุณสามารถเลือกได้ว่าจะใช้ Polyfill หรือ CSS Fallback แบบล้วนๆ

ตัวเลือกที่ 1: Polyfill Fallback

คุณใช้ Polyfill @oddbird/css-anchor-positioning เพื่อจำลองการวางตำแหน่ง Anchor ได้ โดยไม่รองรับ Anchor โดยนัย ดังนั้นคุณต้องเพิ่มชื่อ Anchor ที่ชัดเจนลงในทริกเกอร์ นอกจากนี้ Polyfill ยังไม่รองรับ position-area ในป๊อปโอเวอร์ ดังนั้นคุณจึงต้องใช้ anchor() ในส่วนแทรกที่ต้องการแทน position-area

<script type="module">
  if (!CSS.supports('anchor-name: --foo')) {
    await import("https://unpkg.com/@oddbird/css-anchor-positioning");
  }
</script>

#tour-step {
  /* If using the anchor positioning polyfill with a popover, DO use `anchor()` functions instead of `position-area`. */
  left: anchor(right);
  top: anchor(top);
}

ตัวเลือกที่ 2: CSS สำรองที่ไม่ใช่ Polyfill

หากไม่ต้องการใช้ Polyfill คุณสามารถกำหนดให้เคล็ดลับเครื่องมือเป็นตำแหน่งคงที่ที่ด้านล่างของวิวพอร์ตโดยใช้ @supports not ได้

@supports not (anchor-name: --foo) {
  #tour-step {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
}