如何在 Quasar 中的选项组上放置工具提示？答案

【问题标题】：How can I put tooltips on a Option Group in Quasar?如何在 Quasar 中的选项组上放置工具提示？
【发布时间】：2021-05-28 11:35:30
【问题描述】：

我想在 Quasar 选项组 (QOptionGroup) 中的特定选项上添加 CSS 工具提示或 QToolTip，但我似乎无法确定这是否可行。我正在使用带有 Vuejs3 的 Quasar v2.0.0-beta7。

这个示例有点像我想象的那样（见选项 1）：

  <q-option-group
    color="secondary"
    type="checkbox"
    v-model="group"
    :options="[
      { label: 'Option 1', value: 'op1', tooltip: 'I wish this would appear when you hover on option 1' },
      { label: 'Option 2', value: 'op2' },
      { label: 'Option 3', value: 'op3' }
    ]"
  />

这里的例子： https://jsfiddle.net/98cw4bLs/1/

我试图深入研究 Quasar 源代码以查看 QOptionGroup 中有什么，但实际上找不到。有没有办法做到这一点？我觉得如果我最终创建自己的选项组这样我就可以有一个工具提示，这违背了使用 Quasar 的目的。

【问题讨论】：

标签： vuejs3 quasar-framework

【解决方案1】：

我能够在 Quasar 论坛中找到答案。 QRadio 组件可以满足我的需求：

  <q-radio v-model="group" :label="opt.label" color="secondary" v-for="opt in opts" :key="opt.label" :val="opt.value">
    <q-tooltip v-if="opt.tooltip">
      {{opt.tooltip}}
      </q-tooltip>
  </q-radio>

【讨论】：