[solved] Add a QTooltip to an option in a QOptionGroup

beatscribe

I would like to put a CSS tooltip or QToolTip on a specific option in a Quasar option group (QOptionGroup), but I can’t seem to figure out if this is even possible. I am using Quasar v2.0.0-beta7 with Vuejs3.

This sample is sort of how I imagined it would work (see option 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' }
  ]"
/>

Example here: https://jsfiddle.net/98cw4bLs/1/

I tried to dig into the Quasar source code to see what QOptionGroup has in it, but couldn’t really find it. Is there any way to do this?

I guess a more general question would be, Is there a way I can look at the code in the framework behind QOptionGroup? How does one locate that code?

metalsadman

@beatscribe source is in the github repo, but imo in your usecase why not just use a v-for for QRadio/QCheckbox. https://codepen.io/metalsadman/pen/abBqZbO?editors=101

beatscribe

@metalsadman Thanks so much! I think that is precisely what I needed! I’m fairly new at this so I went to QOptionGroup as soon as I saw it…

beatscribe

Now I end up with the issue that I was specifically asked to make them on separate lines. But these all go together. I will keep looking into it.

beatscribe

II was able to just use Q-radio’s and ditch getting it with data via v-for, its a totally static 2 option thing that’ll probably never change, so just putting it in the HTML doesn’t seem too terrible.

No More Posting New Topics!

[solved] Add a QTooltip to an option in a QOptionGroup