Disable button tooltip when displaying modal



  • I have a button that has a tooltip (for hover-over description purpose) that when clicked, displays a modal dialog.
    My problem is that after the modal is closed, the tooltip is then displayed.

    How can I cancel the tooltip if the button is clicked?

    Button

    <q-btn @click="showTagManagementModel = true">
         <q-tooltip :delay="500">Edit display mode</q-tooltip>
    </q-btn>
    

    Modal

    <q-modal v-model="showTagManagementModel">
          <q-btn @click="showTagManagementModel = false" label="Close" />
    </q-modal>


  • Quasar Modal component offers a “no-refocus” vue property.

    Do not refocus (on modal close) the element that had focus before
    opening (by default it tries to refocus)

    By setting this property on the q-modal, the button triggering the open will not refocus and then trigger the tooltip to show.

    <q-modal v-model="showTagManagementModel" no-refocus>