My goal is to have my v-tooltips displayed upon hover of the checkbox. I’m having trouble stacking the v-hover with the two items. Having the v-slot and the props interact is making no sense to me, and it doesn’t seem to be working as documented. This setup is working to continuously display the checkboxes and the associated tooltips.

<div v-if="q.question.response_type === 'checkbox'" class="d-flex">
                      <v-checkbox
                          v-model="q.question.default_value"
                          @input="updateResponse(q)"
                          :label="q.question.text"
                      ></v-checkbox>
                      <v-tooltip
                          v-if="q.question.tooltip"
                          :text="q.question.tooltip"
                          location="top"
                      >
                        <template v-slot:activator="{ props }">
                          <v-icon small v-bind="props" color="info" class="ml-2">mdi-information</v-icon>
                        </template>
                      </v-tooltip>
                    </div>

I have attempted to implement it, but it has it’s own problem of deactivating the clickability of the icon, thus not showing the tooltip. It adequately hides the icon until hover and meets that action however. How do I make these work together?

<!-- Tooltip added to info symbol -->
                    <div v-if="q.question.response_type === 'checkbox'" class="d-flex align-center">
                      <v-hover v-slot:default="{ isHovering, props }">
                        <div v-bind="props" class="d-flex align-center">
                          <v-checkbox
                              v-model="q.question.default_value"
                              @input="updateResponse(q)"
                              :label="q.question.text"

                          ></v-checkbox>
                          <v-tooltip v-if="q.question.tooltip && isHovering" location="top">
                            <template v-slot:activator="{ attrs }">
                              <v-icon small v-bind="attrs" color="info" class="ml-2">mdi-information</v-icon>
                            </template>
                            <span>{{ q.question.tooltip }}</span>
                          </v-tooltip>
                        </div>
                      </v-hover>
                    </div>