Tooltip

Last updated

2026-10-04 UTC

Demo

tooltip/demo.vue

<template>
  <div class="flex flex-wrap items-center gap-3">
    <YlfTooltip content="Hover above the clouds ☁️" side="top">
      <YlfButton variant="secondary">
        Top tooltip
      </YlfButton>
    </YlfTooltip>
    <YlfTooltip content="Behavior and positioning come from Reka UI" side="bottom">
      <YlfButton variant="secondary">
        Bottom tooltip
      </YlfButton>
    </YlfTooltip>
    <YlfTooltip content="Appearance uses YunLeFun tokens" side="right">
      <YlfButton variant="soft">
        Right tooltip
      </YlfButton>
    </YlfTooltip>
  </div>
</template>

Tooltip uses Reka UI for floating positioning, delay and aria-describedby. Appearance reads tokens.

Props

Prop	Description	Type	Default
content	Tooltip text	string	—
side	Side / orientation	top | right | bottom | left	top
delay	Delay (ms)	number	300
disabled	Disable the tooltip	boolean	false
portalTo	Existing overlay container within the theme	string | HTMLElement	ConfigProvider / body

Id, class, aria-label, data attributes and events forward to the trigger. Icon buttons still need names independent of tooltip content. Use portal-to to keep local theme tooltips beside their trigger's theme.

Slots

Name	Description
default	Trigger element (as-child)
content	Custom tooltip content

Disable tooltips when redundant, for example text segmented controls; enable them in icon only mode.