Tooltip

Provide a short supporting description of an element.

<sy-tooltip>Installation guide Basic usage

Live preview

Interact with the component to see results here.

DescriptionPositionOpening actionMaximum width (px)Open delay (ms)

Force displayHide arrow

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Help<sy-tooltip
      content="Save the changes."
      position="top"
      trigger="hover"
      maxwidth="220"
      opendelay="0"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

Usage guide

Use for short supplementary descriptions, such as explanations of icons or abbreviated names.

Read-only explanations

Place Tooltip inside the target and put a short description in content. Show it through hover, click, focus, or open.

Clickable or editable content

Use Popover when the content needs interaction.

Examples

Click for explanation

Click the button to display the explanation.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Help<sy-tooltip
      content="Save the changes."
      trigger="click"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

Keyboard guidance

Tab to focus the button and display the explanation.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Help<sy-tooltip
      content="Save the changes."
      trigger="focus"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

Wrap long explanations

Limit the width with maxWidth.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Help<sy-tooltip
      content="Saved content is shared with your team and can be edited again at any time."
      trigger="click"
      maxwidth="160"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

Always visible

Show it with open, without automatic triggers.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Help<sy-tooltip
      content="Save the changes."
      trigger="none"
      open
      position="bottom"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

Omit arrow

Hide the arrow as needed.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Help<sy-tooltip
      content="Save the changes."
      trigger="click"
      hidearrow
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

Delayed hover tooltip

Wait 400 ms before opening the tooltip and 200 ms before closing it.

View code

HTML

<div style="display:inline-flex;align-self:center;margin:70px 0">
  <sy-button>Help<sy-tooltip
      content="Save the changes."
      position="top"
      trigger="hover"
      maxwidth="220"
      opendelay="400"
      closedelay="200"
      id="sample"
    ></sy-tooltip>
  </sy-button>
</div>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "opendelay": 400,
    "closedelay": 200
  });
</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-tooltip>`

Properties

Type	Default	Description
`boolean`	`false`	Controls whether the tooltip arrow is hidden
`boolean`	`false`	Show the description independently of automatic triggers.
`number`	`0`	Delay in milliseconds before closing the tooltip after trigger event ends
`number \| null`	`null`	Maximum width of the tooltip in pixels
`number`	`0`	Delay in milliseconds before opening the tooltip after trigger event starts
`string`	`''`	Short helper description.
`'top' \| 'topLeft' \| 'topRight' \| 'right' \| 'rightTop' \| 'rightBottom' \| 'bottom' \| 'bottomLeft' \| 'bottomRight' \| 'left' \| 'leftTop' \| 'leftBottom'`	`'top'`	Placement relative to the element being described.
`'hover' \| 'click' \| 'focus' \| 'none'`	`'hover'`	User action that opens the list or popup.
`\| '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. The host itself is the popup, so the animation runs on the host element directly (including the dynamically-attached arrow). `slide-` and `reveal-` use explicit directions because the tooltip's `position` attribute drives anchor placement, not animation direction.
`'x-fast' \| 'fast' \| 'medium' \| 'slow' \| 'x-slow'`	`'fast'`	Animation playback speed token. Maps to `--transition-*` global tokens.

Methods

Method	Returns	Description
	`Promise<void>`	Close the open panel.

Tooltip

Usage guide

Read-only explanations

Clickable or editable content

Examples

Click for explanation

Keyboard guidance

Wrap long explanations

Always visible

Omit arrow

Delayed hover tooltip

Feature examples

Usage examples · Overview

Property · Animation

Property · AnimationSpeed

Property · Closedelay

Property · Content

Property · Hide Arrow

Property · Max Width

Property · Open

Property · Opendelay

Property · Position

Property · Trigger

Methods · Close

API reference

`<sy-tooltip>`

Properties

Methods