Vue Tooltip - Customize the Content

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