কার্সর সরানোর সময় টুলটিপ দেখুন

ওয়েব ফিচার: ইন্টারেস্ট ইনভোকার পপওভার popover="hint" অ্যাঙ্কর পজিশনিং

ব্যবহারকারীরা সম্পূর্ণ প্রসঙ্গ পরিবর্তন না করেই অতিরিক্ত সম্পর্কিত তথ্য দেখতে চান। ব্যবহারকারী আরও তথ্য জানতে আগ্রহী হলে টুলটিপ দেখানো হলে তা কোনও শব্দের সংজ্ঞা প্রদান, আইকন-ভিত্তিক বোতামের অ্যাকশন স্পষ্ট করা বা ফর্ম ফিল্ডের অতিরিক্ত নির্দেশিকা প্রদানের ক্ষেত্রে উপযোগী হতে পারে।

টুলটিপ তৈরি করা হচ্ছে

<div> বা অন্য কোনও শব্দার্থগতভাবে উপযুক্ত এলিমেন্টে popover="hint" অ্যাট্রিবিউট যোগ করে আপনি প্রয়োজনীয় আচরণ সহ পপওভার তৈরি করতে পারবেন। ব্যবহারকারী টুলটিপ খুললে, এটি অন্যান্য 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 ব্যবহার করে টুলটিপ খোলা হলে, ট্রিগার এলিমেন্ট অটোমেটিক পপওভারের জন্য একটি ইমপ্লিসিট অ্যাঙ্কর হয়ে যায়।

নেটিভ অ্যাঙ্কর পজিশনিং সাপোর্ট করে এমন আধুনিক ব্রাউজারে, আপনাকে ট্রিগারে 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;
}

ফলব্যাক স্ট্র্যাটেজি

ইন্টারেস্ট ইনভোকারের জন্য ফলব্যাক ও ব্রাউজার সহায়তা

NPM থেকে interestfor পলিফিল প্যাকেজ ব্যবহার করে ইন্টারেস্ট ইনভোকারকে শর্তসাপেক্ষে পলিফিল করতে হবে। CDN ব্যবহার করার পরিবর্তে পলিফিল বান্ডেল করাকে অগ্রাধিকার দিন।

বাধ্যতামূলক: HTMLButtonElement.prototype-এ interestForElement প্রপার্টি চেক করে ফিচার শনাক্ত করুন এবং নেটিভ সাপোর্ট না থাকলে শুধুমাত্র তখনই পলিফিল লোড করুন।

<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 পলিফিল সংক্রান্ত সতর্কতা

পলিফিল ব্যবহার করার সময়, নেটিভ সিউডো-ক্লাস ও প্রপার্টি সাপোর্ট না থাকার কারণে CSS API-তে সামান্য পরিবর্তন হয়:

  • সিউডো-ক্লাস: পলিফিল আসল :interest-source এবং :interest-target সিউডো-ক্লাস নির্ধারণ করতে পারে না, তাই এটি পরিবর্তে .interest-source এবং .interest-target ক্লাস প্রয়োগ করে। বাধ্যতামূলক: নেটিভ ও পলিফিল্ড, উভয় স্টেটেই কাজ করার জন্য :is()-এর সাথে এগুলি একত্রিত করুন।
/* 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-এর জন্য, পলিফিলকে 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);
}

পপওভারের জন্য ফলব্যাক ও ব্রাউজার সাপোর্ট

পপওভার API মূলত প্রোগ্রেসিভ এনহ্যান্সমেন্ট, তবে এর সংজ্ঞায়িত আচরণ — টপ-লেয়ার প্রোমোশন, লাইট-ডিসমিস এবং popovertarget ইনভোকেশন — শুধুমাত্র CSS-এর সমতুল্য নয়। পুরনো ব্রাউজারের ক্ষেত্রে পলিফিল বা ম্যানুয়াল ফলব্যাক প্রয়োজন হয়, যদি আপনি কোনওটিই শিপ করতে না চান।

Polyfill: পুরনো ব্রাউজারে popover অ্যাট্রিবিউট কাজ করানোর জন্য, শর্তসাপেক্ষে @oddbird/popover-polyfill লোড করুন। বাধ্যতামূলক: HTMLElement.prototype-এ popover প্রপার্টি চেক করে ফিচার শনাক্ত করুন এবং নেটিভ সাপোর্ট না থাকলে শুধুমাত্র তখনই পলিফিল লোড করুন — শর্তহীনভাবে এটি লোড করবেন না।

বান্ডলার বা ইমপোর্ট ম্যাপের মাধ্যমে:

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

বান্ডলার ছাড়া, <script type="module">-এর মধ্যে CDN থেকে ইমপোর্ট করুন:

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

স্টাইলিং সংক্রান্ত সতর্কতা: পলিফিল আসল :popover-open ছদ্ম-ক্লাসকে সংজ্ঞায়িত করতে পারে না, তাই এটি পরিবর্তে .\:popover-open ক্লাস প্রয়োগ করে। বাধ্যতামূলক: :is() বা :where()-এর সাথে দুটিকে একত্রিত করুন, অন্যথায় :popover-open নেই এমন ব্রাউজার সম্পূর্ণ নিয়মটি বাতিল করে দেয়:

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

বিকল্প হিসেবে, পলিফিল ছাড়া লিগ্যাসি ফলব্যাকের জন্য, position: fixed ব্যবহার করুন এবং getBoundingClientRect()-এর মাধ্যমে ম্যানুয়ালি কোঅর্ডিনেট হিসেব করুন অথবা ব্যবহারের ক্ষেত্রে গ্রহণযোগ্য হলে inset: auto-এর সাথে ডিফল্ট পজিশনিংয়ের উপর নির্ভর করুন।

popover-polyfill, popover কাজ করে কিন্তু popover="hint" কাজ করে না এমন ব্রাউজারে হিন্ট বিহেভিয়ার পলিফিল করে না। এইসব ব্রাউজারের ক্ষেত্রে, ফোকাসের মাধ্যমে খোলা টুলটিপ খোলা থাকতে পারে, যখন হোভারের মাধ্যমে দ্বিতীয় টুলটিপ খোলা হয়।

অ্যাঙ্কর পজিশনিং ছাড়া ব্রাউজারকে সাপোর্ট করতে, আপনি @oddbird/css-anchor-positioning পলিফিল ব্যবহার করতে পারেন। বিকল্প হিসেবে, আপনি ফলব্যাক পজিশন নির্দিষ্ট করতে @supports ব্যবহার করতে পারেন।

পুরনো ব্রাউজার সাপোর্ট করার জন্য @oddbird/css-anchor-positioning পলিফিল ব্যবহার করার সময় মনে রাখবেন যে পলিফিল ইমপ্লিসিট অ্যাঙ্কর বা পপওভারে position-area সাপোর্ট করে না। ট্রিগারে স্পষ্টভাবে একটি anchor-name সেট করুন, পপওভারে position-anchor সেট করুন এবং position-area-এর পরিবর্তে anchor() ইনসেট ফাংশন ব্যবহার করে পজিশন করুন: 

<!-- 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;
}