Popover

A lightweight contextual panel that reveals additional information when a trigger is activated. Closes on Escape or clicking outside.

Default

A popover triggered by an info icon. Pass a description string for simple text content, or use the default slot for richer markup.

<diwa-popover description="Additional context about this field."></diwa-popover>

Directions

Click each info icon to see the panel open in different directions.

<diwa-popover direction="bottom" description="Opens below the trigger."></diwa-popover>
<diwa-popover direction="top" description="Opens above the trigger."></diwa-popover>
<diwa-popover direction="start" description="Opens to the start (left in LTR)."></diwa-popover>
<diwa-popover direction="end" description="Opens to the end (right in LTR)."></diwa-popover>

Rich content via default slot

Transcript quality

Quality tiers

High — full accuracy, higher cost
Medium — balanced cost/quality
Low — fast, lower accuracy

<diwa-popover direction="bottom">
  <div>
    <p>Quality tiers</p>
    <ul>
      <li>High — full accuracy, higher cost</li>
      <li>Medium — balanced cost/quality</li>
      <li>Low — fast, lower accuracy</li>
    </ul>
  </div>
</diwa-popover>