How to add a tooltip text to a button?

[bigfooted]

Hi,

I placed this question in paraview discourse but I think this it the better place to ask :
suppose I have a simple checkbox in trame. How can I add a tooltip text when I hover over the box? I do not know how I can translate the explanation on the vuetify website into trame functionality.

The vuetify site gives for instance this example:

<v-tooltip text="Tooltip">
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props">Tooltip</v-btn>
  </template>
</v-tooltip>

and I have a simple checkbox like this:

    vuetify.VCheckbox(
        v_model=("list_change", True),
        on_icon="mdi-account-check",
        off_icon="mdi-account-check-outline",
        classes="mx-1",
        hide_details=True,
        dense=True,
        click=reset_resolution,
    )

I have to add a v_tooltip and a v_bind?

[jourdain]

with vuetify.VTooltip(text="Tooltip") as elem_to_test:
    with vuetify.Template(v_slot_activator="{ props }"):
        vuetify.VCheckbox(
          v_bind="props"
          v_model=("list_change", True),
          on_icon="mdi-account-check",
          off_icon="mdi-account-check-outline",
          classes="mx-1",
          hide_details=True,
          dense=True,
          click=reset_resolution,
      )
   print(elem_to_test.html) # <--- That way you can see if it match what the vuetify doc is telling you

[bigfooted]

Thanks, @jourdain using a Div worked, although the tooltip is now much farther away than for the button.

[jourdain]

Then that can be fixed by css/style/class

[jourdain]

Try vuetify.VCheckbox(classes="ma-0 pa-0", ...)

[bigfooted]

Thanks again!

[bigfooted]

For the movement of the tooltip, one should use nudge_top and nudge_bottom it seems, I had to use nudge_left=100 to get it more or less right:
with vuetify.VTooltip(top=True, nudge_left="100",nudge_top="0")