syidaxdesign system
Home Pricing Settings
ComponentsOverlays

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.
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>

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

Attribute / PropertyTypeDefaultDescription
booleanfalseControls whether the tooltip arrow is hidden
booleanfalseShow the description independently of automatic triggers.
number0Delay in milliseconds before closing the tooltip after trigger event ends
number | nullnullMaximum width of the tooltip in pixels
number0Delay 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

MethodReturnsDescription
Promise<void>Close the open panel.
Design SystemTab Navigate Enter Open