Having trouble getting help?
Contact Support
Contact Support
Dynamic tooltip content with html elements in Vue Tooltip component
25 Dec 20248 minutes to read
The Tooltip component loads HTML tags using the content template.
HTML tags such as <div>
, <span>
, bold
, italic
, underline
, etc., can be used. Style attributes can also be applied to these HTML tags.
Here, the Bold, Italic, Underline, and Anchor tags are used.
<template>
<div id='app'>
<ejs-tooltip target='#title' cssClass='e-tooltip-css' position='BottomCenter' opensOn='Click' ref="tooltip"
:content="content">
<div id="container">
<div id="tooltipContent">
<div class="content">
<ejs-button class="text" id="title">HTML(With Title)</ejs-button>
</div>
</div>
</div>
</ejs-tooltip>
</div>
</template>
<script setup>
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { TooltipComponent as EjsTooltip } from '@syncfusion/ej2-vue-popups';
import { createApp } from 'vue';
const app = createApp();
var demoVue = app.component("demo", {
template: `
<div id="tooltip" ref="content">
<h2>HTML Tags</h2>
Through templates, <b><span style="color:#e3165b">tooltip content</span></b> can be loaded with <u><i> inline HTML, images, iframe, videos, maps </i></u>. A title can be added to the content
</div>`,
data() {
return {
data: {}
};
}
});
const content = () => {
return { template: demoVue };
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#tooltipContent table {
margin: 0 auto;
}
#tooltipContent {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 50px;
height: 200px;
}
.text {
text-transform: capitalize;
width: 155px;
}
.header {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
padding-bottom: 2px;
margin: 4px -7px 7px -7px;
padding-right: 5px;
padding-left: 6px;
font-weight: bold;
height: 18px;
border-bottom: 1px solid white;
}
.e-tooltip-css.e-tooltip-wrap .e-tip-content {
padding: 0 10px 10px 10px;
}
</style>
<template>
<div id='app'>
<ejs-tooltip target='#title' cssClass='e-tooltip-css' position='BottomCenter' opensOn='Click' ref="tooltip"
:content="content">
<div id="container">
<div id="tooltipContent">
<div class="content">
<ejs-button class="text" id="title">HTML(With Title)</ejs-button>
</div>
</div>
</div>
</ejs-tooltip>
</div>
</template>
<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { TooltipComponent } from '@syncfusion/ej2-vue-popups';
import { createApp } from 'vue';
const app = createApp();
var demoVue = app.component("tooltipTemplate", {
template: `
<div id="tooltip" ref="content">
<h2>HTML Tags</h2>
Through templates, <b><span style="color:#e3165b">tooltip content</span></b> can be loaded with <u><i> inline HTML, images, iframe, videos, maps </i></u>. A title can be added to the content
</div>`,
data() {
return {
data: {}
};
}
});
export default {
name: "App",
components: {
"ejs-tooltip": TooltipComponent,
"ejs-button": ButtonComponent
},
data: function () {
return {
content: function () {
return { template: demoVue }
}
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#tooltipContent table {
margin: 0 auto;
}
#tooltipContent {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 50px;
height: 200px;
}
.text {
text-transform: capitalize;
width: 155px;
}
.header {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
padding-bottom: 2px;
margin: 4px -7px 7px -7px;
padding-right: 5px;
padding-left: 6px;
font-weight: bold;
height: 18px;
border-bottom: 1px solid white;
}
.e-tooltip-css.e-tooltip-wrap .e-tip-content {
padding: 0 10px 10px 10px;
}
</style>