Vue Tooltips combined with modals

Topic: Vue Tooltips combined with modals

Deepshore free asked 5 years ago

*Expected behavior*When updating mdbvue from 5.4.0 to 5.5.0, modals should still behave as before.

Actual behavior**We use mdb tooltips combined with modals (on click). When we apply the update mdbvue 5.5.0, the modals will appear **inside the tooltip when the button is clicked.Before the update, the modal was opening across the whole screen (as expected).

In addition: The tooltip disappears, when being hovered. This makes it impossible to highlight and copy a tooltip text. This was also possible before the update.

<mdbTooltip material v-if="item.hash==='null'" :options="{placement: 'right'}" :key="componentKey">
<span slot="tip">Unverified, click to verify</span>
<mdb-btn tag="a" outline="default" slot="reference" class="animated zoomIn" size="md" darkWaves rounded @click="verify = true"><mdb-icon icon="link" /></mdb-btn>
<verify-modal :verify="verify" :item="item" @close="verify = false" @delete-entry-from-list="deleteEntryFromList"/>
</mdbTooltip>

Switching from mdbTooltip to mdbPopover with trigger="hover" works flawlessly.

Resources (screenshots, code snippets etc.)

Add comment

Mikołaj Smoleński staff answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

Hi there,

Please just add slot="reference" to your modal component.

Here's a working example:

  <mdb-tooltip material :options="{placement: 'right'}">
    <span slot="tip">Unverified, click to verify</span>
    <mdb-btn tag="a" outline="default" slot="reference" class="animated zoomIn" size="md" darkWaves rounded @click="modal = true"><mdb-icon icon="link" /></mdb-btn>
    <mdb-modal slot="reference" :show="modal" @close="modal = false">
      <mdb-modal-header>
        <mdb-modal-title>Modal title</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>...</mdb-modal-body>
      <mdb-modal-footer>
        <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
        <mdb-btn color="primary">Save changes</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
  </mdb-tooltip>

Best regards

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Vue
MDB Version: 5.5.1
Device: Lenovo
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

Deepshore

130Support score
12Questions 7Answers 0Snippets