Having trouble getting help?
Contact Support
Contact Support
Custom tooltip with dynamic html in Vue Tooltip component
25 Dec 20246 minutes to read
Tooltip loads HTML pages via the HTML tags such as iframe, video, and map using the content
property, which supports both string and HTML tags.
To load an iframe
element in tooltip, set the required iframe in the content
property while initializing the tooltip component. Refer to the following code:
content= '<iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></iframe>
<template>
<div id='app'>
<ejs-tooltip target='#iframeContent' cssClass='e-tooltip-css' ref="tooltipTitle" :position='position'
:opensOn='opensOn' :enableHtmlSanitizer='enableHtmlSanitizer' :content='content'>
<div id='container'>
<div id="tooltipContent">
<div class="content">
<ejs-button cssClass="text" id="iframeContent" cssClass='e-outline' isPrimary=true>Embedded Iframe</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';
const position = 'BottomCenter';
const opensOn = 'Click';
const enableHtmlSanitizer = 'false';
const content = '<iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></iframe>';
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#tooltipContent {
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 65px 10px 0 10px;
}
.content {
display: inline-block;
width: 49%;
height: 250px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#tooltipFrame {
width: 332px;
height: 233px;
}
.content .e-btn {
position: relative;
left: 50%;
transform: translateX(-50%);
}
</style>
<template>
<div id='app'>
<ejs-tooltip target='#iframeContent' cssClass='e-tooltip-css' ref="tooltipTitle" :position='position'
:opensOn='opensOn' :content='content' :enableHtmlSanitizer='enableHtmlSanitizer'>
<div id='container'>
<div id="tooltipContent">
<div class="content">
<ejs-button cssClass="text" id="iframeContent" cssClass='e-outline' isPrimary=true>Embedded Iframe</ejs-button>
</div>
</div>
</div>
</ejs-tooltip>
</div>
</template>
<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { TooltipComponent } from '@syncfusion/ej2-vue-popups';
export default {
name: "App",
components: {
"ejs-tooltip": TooltipComponent,
"ejs-button": ButtonComponent
},
data: function () {
return {
position: 'BottomCenter',
opensOn: 'Click',
enableHtmlSanitizer:false,
content: '<iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></iframe>'
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#tooltipContent {
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 65px 10px 0 10px;
}
.content {
display: inline-block;
width: 49%;
height: 250px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
#tooltipFrame {
width: 332px;
height: 233px;
}
.content .e-btn {
position: relative;
left: 50%;
transform: translateX(-50%);
}
</style>