JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Custom Tooltip with dynamic HTML in JavaScript (ES5) Tooltip control

06 Jun 2023 / 2 minutes to read

Tooltip loads HTML pages via 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 of tooltip while initializing the tooltip component. Refer to the following code.

Copied to clipboard
content: '<iframe src="https://www.syncfusion.com/products/essential-js2"></iframe>

Use the following steps to render ej2-map in tooltip:

  1. Initialize the map component and create an element. After initialization, append the map object to the element.
  2. Set the rendered map element to the content of tooltip component. Refer to the following sample.
Source
Preview
index.js
index.html
index.css
Copied to clipboard
//Render iframe Button
var iframeContent = new ej.buttons.Button({
    cssClass: 'e-outline',
    isPrimary: true
});
iframeContent.appendTo('#iframeContent');

//Render map Button
var MapButton = new ej.buttons.Button({
    cssClass: 'e-outline',
    isPrimary: true
});
MapButton.appendTo('#Map');

//Render iframe Tooltip
var TooltipContent = new ej.popups.Tooltip({
    cssClass: 'e-tooltip-css',
    content: '<iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard" id="tooltipFrame"></iframe>',
    position: 'BottomCenter',
    opensOn: 'Click',
    width: '350',
    height: '250'
});
TooltipContent.appendTo('#iframeContent');

var dafaultData = [{
        "drillColor": '#C13664',
        "continent": "North America",
        "CategoryName": "Books",
        "Sales": 10882,
        'color': '#71B081'
    },
    {
        "drillColor": '#9C3367',
        "continent": "South America",
        "CategoryName": "Books",
        "Sales": 13776,
        'color': '#5A9A77'
    },
    {
        "drillColor": '#80306A',
        "continent": "Africa",
        "CategoryName": "Books",
        "Sales": 18718.0,
        'color': '#498770'
    },
    {
        "drillColor": '#622D6C',
        "continent": "Europe",
        "CategoryName": "Books",
        "Sales": 3746,
        'color': '#39776C'
    },
    {
        "drillColor": '#462A6D',
        "continent": "Asia",
        "CategoryName": "Books",
        "Sales": 10688,
        'color': '#266665'
    },
    {
        "drillColor": '#2A2870',
        "continent": "Australia",
        "CategoryName": "Books",
        "Sales": 30716,
        'color': '#124F5E '
    }
];

//Render Map component
var maps = new ej.maps.Maps({
    zoomSettings: {
        enable: false
    },
    legendSettings: {
        visible: false
    },
    width: '336',
    height: '235',
    layers: [{
        shapeData: new ej.maps.MapAjax('./map_data.json'),
        shapePropertyPath: 'continent',
        shapeDataPath: 'continent',
        dataSource: dafaultData,
        shapeSettings: {
            autofill: true
        }
    }, ],
});

//Create an element and append initialized map object to the created element
var map = document.createElement("div");
maps.appendTo(map);
//Render map Tooltip
var mapTooltip = new ej.popups.Tooltip({
    opensOn: 'Click',
    position: 'BottomCenter',
    cssClass: 'mapTooltip',
    content: map,
    width: '350',
    height: '250'
});
mapTooltip.appendTo('#Map');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for ListView UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-maps/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="tooltipContent">
            <div class="content">
                <!-- iframe element -->
                <button class="text" id="iframeContent">Embedded Iframe</button>
            </div>
            <div class="content">
                <!-- map element -->
                <button class="text" id="Map">Map</button>
            </div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    top: 45%;
    left: 45%;
}

#tooltipContent {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 65px 10px;
}

.content {
    display: inline-block;
    width: 49%;
}

#tooltipFrame {
    width: 332px;
    height: 233px;
}

.content button {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.e-tooltip-wrap.e-popup.mapTooltip .e-tip-content {
    padding-top: 5px;
}
Previous
Next