Tooltip (文字提示)

<template>
  <KunTooltip text="我是一个提示框">
    <KunButton variant="bordered">悬停我</KunButton>
  </KunTooltip>
</template>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <KunTooltip text="上方提示" position="top">
      <KunButton variant="bordered">上 top</KunButton>
    </KunTooltip>
    <KunTooltip text="右侧提示" position="right">
      <KunButton variant="bordered">右 right</KunButton>
    </KunTooltip>
    <KunTooltip text="下方提示" position="bottom">
      <KunButton variant="bordered">下 bottom</KunButton>
    </KunTooltip>
    <KunTooltip text="左侧提示" position="left">
      <KunButton variant="bordered">左 left</KunButton>
    </KunTooltip>
  </div>
</template>

<template>
  <KunTooltip text="带箭头的提示" position="bottom" :show-arrow="true">
    <KunButton variant="bordered">悬停查看箭头</KunButton>
  </KunTooltip>
</template>

<template>
  <KunTooltip
    text="这是一段很长的提示文字，当内容超过最大宽度 max-w-xs 时，文本会自动换行，而不会撑破容器或溢出屏幕。"
    position="top"
    :show-arrow="true"
  >
    <KunButton variant="bordered">悬停查看长内容</KunButton>
  </KunTooltip>
</template>

<template>
  <KunTooltip position="top" :show-arrow="true">
    <KunButton variant="bordered" color="secondary">富内容提示</KunButton>
    <template #content>
      <div class="flex items-center gap-2">
        <KunIcon name="lucide:info" class="text-primary" />
        <span>通过 content 插槽自定义提示内容</span>
      </div>
    </template>
  </KunTooltip>
</template>

<template>
  <div class="flex items-center gap-1">
    <KunTooltip text="搜索" shortcut="Mod+K">
      <KunButton variant="light" color="default" is-icon-only aria-label="搜索">
        <KunIcon name="lucide:search" />
      </KunButton>
    </KunTooltip>
    <KunTooltip text="引用" shortcut="Q">
      <KunButton variant="light" color="default" is-icon-only aria-label="引用">
        <KunIcon name="lucide:quote" />
      </KunButton>
    </KunTooltip>
    <KunTooltip text="撤销" shortcut="Mod+Z">
      <KunButton variant="light" color="default" is-icon-only aria-label="撤销">
        <KunIcon name="lucide:rotate-ccw" />
      </KunButton>
    </KunTooltip>
    <KunTooltip text="重做" shortcut="Mod+Shift+Z">
      <KunButton variant="light" color="default" is-icon-only aria-label="重做">
        <KunIcon name="lucide:rotate-cw" />
      </KunButton>
    </KunTooltip>
  </div>
</template>