Topic: Vue Tooltips combined with modals
*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.)
Mikołaj Smoleński staff answered 5 years ago
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: 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