Как я могу поместить всплывающие подсказки в группу опций в Quasar?

#vuejs3 #quasar-framework

#vuejs3 #quasar-framework

Вопрос:

Я хотел бы поместить всплывающую подсказку CSS или QToolTip для определенной опции в группе опций Quasar (QOptionGroup), но, похоже, я не могу понять, возможно ли это вообще. Я использую Quasar v2.0.0-beta7 с Vuejs3.

Этот пример похож на то, как я представлял, что это будет работать (см. Вариант 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, если я просто создам свою собственную группу опций, чтобы у меня была всплывающая подсказка.

Ответ №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>