xxxxxxxxxx1
<template>2
<MDBContainer>3
<br/><br/><br/><br/>4
<div ref="tooltipRef">5
<MDBTooltip v-model='showTooltip'>6
<template #reference>7
<MDBBtn>Geruch</MDBBtn>8
</template>9
<template #tip></template>10
</MDBTooltip>11
</div>12
<br/><br/><br/><br/>13
<MDBBtn @click="toggleTooltip">Toggle tooltip visibility</MDBBtn>14
</MDBContainer>15
</template>xxxxxxxxxx1
<style>2
#app {3
font-family: Roboto, Helvetica, Arial, sans-serif;4
}5
6
.not-visible .tooltip {7
display: none8
}9
</style>xxxxxxxxxx1
<script>2
import { MDBTooltip, MDBContainer, MDBBtn } from "mdb-vue-ui-kit";3
import { ref } from 'vue';4
export default {5
components: {6
MDBTooltip, MDBContainer, MDBBtn7
},8
setup() {9
const showTooltip = ref(false);10
const tooltipRef = ref(null)11
12
const toggleTooltip = () => {13
tooltipRef.value.classList.toggle("not-visible")14
}15
return {16
showTooltip, toggleTooltip, tooltipRef, 17
}18
}19
};20
</script> Console errors: 0