Specifying the Content Template
The following code shows how to create a template consisting of static (text) and dynamic (the Switch UI component) content:
- <template>
- <div>
- <img id="image" src="https://url/to/an/image" />
- <DxTooltip
- target="#image"
- show-event="dxhoverstart">
- <template>
- <p>Static content</p>
- <dx-switch>
- <!-- The "Switch" UI component is configured here -->
- </dx-switch>
- </template>
- </DxTooltip>
- </div>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxTooltip } from 'devextreme-vue/tooltip';
- import { DxSwitch } from 'devextreme-vue/switch';
- export default {
- components: {
- DxTooltip,
- DxSwitch
- }
- }
- </script>
Switching Templates On the Fly
If you need to render different templates depending on a specific condition, define them inside the Tooltip container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate property's value.
App.vue
- <template>
- <div>
- <img id="image" src="https://url/to/an/image" />
- <DxTooltip
- target="#image"
- show-event="dxhoverstart"
- hide-event="dxhoverend"
- :contentTemplate="currentTemplate">
- <template #template1>
- <p>First template</p>
- </template>
- <template #template2>
- <p>Second template</p>
- </template>
- </DxTooltip>
- <DxButton
- id="buttonContainer"
- text="Change the Template"
- @click="changeTemplate"
- />
- </div>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxTooltip } from 'devextreme-vue/tooltip';
- import { DxButton } from 'devextreme-vue/button';
- export default {
- components: {
- DxTooltip,
- DxButton
- },
- data() {
- return {
- currentTemplate: "template1"
- };
- },
- methods: {
- changeTemplate () {
- this.currentTemplate = (this.currentTemplate === 'template1' ? 'template2' : 'template1');
- }
- }
- }
- </script>
- <style>
- #buttonContainer {
- display: block;
- width: 200px
- }
- </style>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.