Popover

Display more information or a small content area near an element.

<sy-popover>Installation guide Basic usage

Live preview

Interact with the component to see results here.

PositionOpening actionOpen delay (ms)Close delay (ms)Animation

Arrow

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Detailed guidance<sy-popover
      trigger="click"
      arrow
      position="bottom"
      opendelay="0"
      closedelay="100"
      animation="none"
      id="sample"
    >
      <div style="padding:12px;max-width:220px"><strong>Share with your
          team</strong>
        <p>Team members invited to the project can view it together.</p>
      </div>
    </sy-popover>
  </sy-button>
</div>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Display</sy-button>
  <sy-button id="action-1" size="small">Hide</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setOpen();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setClose();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Usage guide

Provide additional information or a small interaction near its target. Use Tooltip for short descriptions and Popconfirm for confirmation questions.

Content and placement: Place it inside the trigger and put content in the default slot. Set placement and arrow visibility with position and arrow; the popup adjusts to available screen space.
Opening behavior: Choose click, hover, or focus to suit the workflow.
Direct control: Disable automatic triggers with trigger="null", then use setOpen(), setClose(), or open.

Examples

Contextual guidance

View a detailed explanation near the button.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Detailed guidance<sy-popover
      trigger="click"
      arrow
      id="sample"
    >
      <div style="padding:12px;max-width:220px"><strong>Share with your
          team</strong>
        <p>Team members invited to the project can view it together.</p>
      </div>
    </sy-popover>
  </sy-button>
</div>

Show beside the element

Adjust the position if there is insufficient space on the right.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Detailed guidance<sy-popover
      trigger="click"
      arrow
      position="right"
      id="sample"
    >
      <div style="padding:12px;max-width:220px"><strong>Share with your
          team</strong>
        <p>Team members invited to the project can view it together.</p>
      </div>
    </sy-popover>
  </sy-button>
</div>

Keyboard focus

Tab to the button to view the guidance.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Detailed guidance<sy-popover
      trigger="focus"
      arrow
      id="sample"
    >
      <div style="padding:12px;max-width:220px"><strong>Share with your
          team</strong>
        <p>Team members invited to the project can view it together.</p>
      </div>
    </sy-popover>
  </sy-button>
</div>

Control through external state

Open and close it from the app without automatic triggers.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Detailed guidance<sy-popover
      trigger="null"
      arrow
      id="sample"
    >
      <div style="padding:12px;max-width:220px"><strong>Share with your
          team</strong>
        <p>Team members invited to the project can view it together.</p>
      </div>
    </sy-popover>
  </sy-button>
</div>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Display</sy-button>
  <sy-button id="action-1" size="small">Hide</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setOpen();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setClose();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Feature examples

Choose a feature from 12 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Property · Trigger

See how settings change appearance and behavior.

View code

HTML

Loading the example.

API reference

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

`<sy-popover>`

Properties

Type	Default	Description
`boolean`	`false`	Show an arrow pointing to the trigger.
`boolean`	`false`	Whether the submenu is expanded.
`'top' \| 'bottom' \| 'left' \| 'right' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'`	`'bottom'`	Popup placement relative to the trigger.
`'hover' \| 'click' \| 'focus' \| 'null'`	`'hover'`	User action that opens the list or popup.
`number`	`0`	Opening delay in milliseconds.
`number`	`100`	Closing delay in milliseconds.
`boolean`	`false`	Stick to the top of the nearest scroll container.
`\| 'none' \| 'fade' \| 'fade-scale' \| 'zoom' \| 'pop' \| 'slide-top' \| 'slide-bottom' \| 'slide-left' \| 'slide-right' \| 'slide-fade-top' \| 'slide-fade-bottom' \| 'slide-fade-left' \| 'slide-fade-right' \| 'reveal-top' \| 'reveal-bottom' \| 'reveal-left' \| 'reveal-right' \| 'flip-x' \| 'flip-y' \| 'bounce' \| 'spin'`	`'none'`	Enter/exit animation type. `none` (default) toggles instantly.
`'x-fast' \| 'fast' \| 'medium' \| 'slow' \| 'x-slow'`	`'fast'`	Animation playback speed token. Maps to `--transition-*` global tokens.

Methods

Method	Returns	Description
	`Promise<void>`	Expand the submenu.
	`Promise<void>`	Close the item.

Slots

Slot	Description
	Component body or child items.

Popover

Usage guide

Examples

Contextual guidance

Show beside the element

Keyboard focus

Control through external state

Feature examples

Usage examples · Overview

Property · Animation

Property · AnimationSpeed

Property · Arrow

Property · Closedelay

Property · Open

Property · Opendelay

Property · Position

Property · Sticky

Property · Trigger

Methods · Set Close

Methods · Set Open

API reference

`<sy-popover>`

Properties

Methods

Slots