Search results

Dynamic tooltip content with HTML elements in Vue Tooltip component

14 Apr 2021 / 2 minutes to read

The Tooltip component loads HTML tags using the content template.

The HTML tags such as <div>, <span>, bold, italic, underline, etc., can be used. Style attributes can also be applied with HTML tags.

Here, Bold, Italic, Underline, and Anchor tags are used.

Copied to clipboard
   <div id='app'>
        <ejs-tooltip target='#title' cssClass='e-tooltip-css' ref="tooltipTitle" 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>
@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;
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
import { TooltipPlugin } from '@syncfusion/ej2-vue-popups';

var demoVue = Vue.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
  data() {
    return {
      data: {}

export default {
  data: function() {
    return {
        content: function () {
            return { template : demoVue}