lite-space/ui | A Vue3 based UnoCSS UI library

鼠标进入时将显示工具提示

基本用法

最简单的用法。

<script setup lang="ts">
  import { Tooltip } from '@lite-space/ui'
</script>

<template>
  <Tooltip content="prompt text">
    <span class="text-sm">鼠标进入时将显示工具提示</span>
  </Tooltip>
</template>

位置

位置有 12 个方向。

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

<template>
  <div px-6>
    <div ml-20>
      <Space>
        <Tooltip placement="top-start" content="prompt text">
          <Button class="w-18">
            TL
          </Button>
        </Tooltip>
        <Tooltip placement="top" content="prompt text">
          <Button class="w-18">
            Top
          </Button>
        </Tooltip>
        <Tooltip placement="top-end" content="prompt text">
          <Button class="w-18">
            TR
          </Button>
        </Tooltip>
      </Space>
    </div>
    <div flex="~ items-center justify-between">
      <div>
        <Space direction="vertical">
          <Tooltip placement="left-start" content="prompt text">
            <Button class="w-18">
              LT
            </Button>
          </Tooltip>
          <Tooltip placement="left" content="prompt text">
            <Button class="w-18">
              Left
            </Button>
          </Tooltip>
          <Tooltip placement="left-end" content="prompt text">
            <Button class="w-18">
              LB
            </Button>
          </Tooltip>
        </Space>
      </div>
      <div>
        <Space direction="vertical">
          <Tooltip placement="right-start" content="prompt text">
            <Button class="w-18">
              RT
            </Button>
          </Tooltip>
          <Tooltip placement="right" content="prompt text">
            <Button class="w-18">
              Right
            </Button>
          </Tooltip>
          <Tooltip placement="right-end" content="prompt text">
            <Button class="w-18">
              RB
            </Button>
          </Tooltip>
        </Space>
      </div>
    </div>
    <div ml-20>
      <Space>
        <Tooltip placement="bottom-start" content="prompt text">
          <Button class="w-18">
            BL
          </Button>
        </Tooltip>
        <Tooltip placement="bottom" content="prompt text">
          <Button class="w-18">
            Bottom
          </Button>
        </Tooltip>
        <Tooltip placement="bottom-end" content="prompt text">
          <Button class="w-18">
            BR
          </Button>
        </Tooltip>
      </Space>
    </div>
  </div>
</template>

鼠标进入时将显示工具提示

偏移

使用 offset 属性设置偏移量。

<script setup lang="ts">
  import { Tooltip } from '@lite-space/ui'
</script>

<template>
  <Tooltip content="prompt text" :offset="10">
    <span class="text-sm">鼠标进入时将显示工具提示</span>
  </Tooltip>
</template>

Installation