Tooltip 文字提示

<script setup lang="ts">
  import { Button, Tooltip } from '@hina-ui/vue'
</script>

<template>
  <Tooltip content="保存后立刻发布">
    <Button variant="outline" tone="neutral">发布</Button>
  </Tooltip>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Inline, Input, Stack, Switch, Text, vTooltip } from '@hina-ui/vue'

  const content = ref('提示文字')
  const disabled = ref(false)
</script>

<template>
  <Stack align="start">
    <Inline>
      <Button v-tooltip="'直接绑定已有元素'" variant="outline" tone="neutral">字符串</Button>
      <Button v-tooltip="{ content, side: 'bottom', disabled }" variant="outline" tone="neutral">
        对象配置
      </Button>
    </Inline>
    <Input v-model="content" aria-label="提示文字" class="w-64" />
    <Inline>
      <Switch v-model="disabled" aria-label="禁用对象提示" />
      <Text>禁用对象提示</Text>
    </Inline>
  </Stack>
</template>

<script setup lang="ts">
  import { Button, Inline, Tooltip } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center" class="gap-6">
    <Tooltip content="浮在头顶" side="top">
      <Button variant="outline" tone="neutral">top</Button>
    </Tooltip>
    <Tooltip content="浮在右侧" side="right">
      <Button variant="outline" tone="neutral">right</Button>
    </Tooltip>
    <Tooltip content="浮在下方" side="bottom">
      <Button variant="outline" tone="neutral">bottom</Button>
    </Tooltip>
    <Tooltip content="与起始边对齐" side="top" align="start">
      <Button variant="outline" tone="neutral">top start</Button>
    </Tooltip>
  </Inline>
</template>

<script setup lang="ts">
  import { Button, Inline, Tooltip } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center" class="gap-6">
    <Tooltip content="sideOffset 为 0" :side-offset="0">
      <Button variant="outline" tone="neutral">紧贴</Button>
    </Tooltip>
    <Tooltip content="sideOffset 为 16" :side-offset="16">
      <Button variant="outline" tone="neutral">远离</Button>
    </Tooltip>
  </Inline>
</template>

<script setup lang="ts">
  import { Info, Save } from '@lucide/vue'
  import { IconButton, Inline, Kbd, Tooltip } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center" class="gap-6">
    <Tooltip>
      <IconButton label="保存" variant="outline" :tooltip="false">
        <Save />
      </IconButton>
      <template #content>
        <Inline align="center" class="gap-1.5">
          保存草稿
          <Kbd>Ctrl S</Kbd>
        </Inline>
      </template>
    </Tooltip>
    <Tooltip content="这段说明比较长，超过气泡的最大宽度之后会自动折成多行，不会一直往外撑。">
      <IconButton label="说明" variant="outline" :tooltip="false">
        <Info />
      </IconButton>
    </Tooltip>
  </Inline>
</template>

<script setup lang="ts">
  import { Button, Inline, Tooltip, TooltipProvider } from '@hina-ui/vue'
</script>

<template>
  <TooltipProvider :delay-duration="600" :skip-delay-duration="0">
    <Inline align="center" class="gap-6">
      <Tooltip content="等待 600 毫秒后出现">
        <Button variant="outline" tone="neutral">慢一点</Button>
      </Tooltip>
      <Tooltip content="同样等待 600 毫秒">
        <Button variant="outline" tone="neutral">再一个</Button>
      </Tooltip>
    </Inline>
  </TooltipProvider>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Inline, Switch, Tooltip } from '@hina-ui/vue'

  const shown = ref(true)
</script>

<template>
  <Inline gap="lg" align="center">
    <Tooltip content="由右边的开关控制" :open="shown">
      <Button variant="outline" tone="neutral">提示的触发器</Button>
    </Tooltip>
    <Switch v-model="shown">显示提示</Switch>
  </Inline>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, Inline, Text, Tooltip } from '@hina-ui/vue'

  const off = ref(true)
</script>

<template>
  <Inline align="center">
    <Tooltip content="侧栏收起时才需要这句话" :disabled="off">
      <Button variant="outline" tone="neutral">悬停试试</Button>
    </Tooltip>
    <Button size="sm" variant="soft" tone="neutral" @click="off = !off">
      {{ off ? '启用提示' : '禁用提示' }}
    </Button>
    <Text tone="muted" size="sm">当前：{{ off ? '已禁用' : '已启用' }}</Text>
  </Inline>
</template>