Augma

主题

Tooltip 提示 ​

为可聚焦操作补充简短说明。

基础用法 ​

查看 Vue 源码
Vue · TypeScript
<script setup lang="ts">
import { AgmButton, AgmTooltip } from 'augma'
</script>

<template>
  <AgmTooltip text="恢复默认的显示参数">
    <AgmButton variant="outline">恢复默认</AgmButton>
  </AgmTooltip>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API ​

属性类型默认值说明
textstring必填提示内容
delaynumber250悬停延迟（毫秒）

插槽 ​

  • default：单个可聚焦触发元素

键盘操作与使用边界 ​

悬停或聚焦触发元素显示，Escape 关闭。触屏必需信息应直接展示，不仅放在提示里。

安装 ​

ts
import { AgmTooltip } from 'augma'
import 'augma/style.css'