quasar在按钮上hover时候显示文本的4种方法

在 Quasar 中，为按钮添加 hover 时显示文本的功能，可以通过以下几种方式实现：

---

方法 1：使用 tooltip

Quasar 提供了 QTooltip 组件，专门用于在鼠标悬停时显示文本。

示例代码

<template>
  <q-btn
    color="primary"
    icon="info"
    label="按钮"
  >
    <q-tooltip>
      这是一个提示文本
    </q-tooltip>
  </q-btn>
</template>

功能点

• q-btn 是按钮组件。
• q-tooltip 是内置的悬停提示组件，会自动在按钮上悬停时显示。
• 文本内容写在 q-tooltip 内即可。

---

方法 2：使用自定义显示文本

如果想在按钮旁边显示自定义的文本，可以通过 hover 的事件和动态绑定实现。

示例代码

<template>
  <div class="button-container">
    <q-btn
      color="primary"
      icon="info