Search results

Custom Tooltip with dynamic HTML

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 control. Refer to the following code.

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 control and create an element. After initialization, append the map object to the element.
  2. Set the rendered map element to the content of tooltip control. Refer to the following sample.
Source
Preview
index.ts
index.html
index.css
import { Tooltip } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';
import { Maps, Legend, Marker, MapsTooltip, ILoadEventArgs, MapsTheme,MapAjax } from '@syncfusion/ej2-maps';
Maps.Inject(Legend, Marker, MapsTooltip);
//World map data

//Render iframe button
let iframeContent: Button = new Button({ cssClass: 'e-outline', isPrimary: true });
iframeContent.appendTo('#iframeContent');

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

//Render iframe tooltip
let TooltipContent: Tooltip = new Tooltip({
    cssClass: 'e-tooltip-css',
    content: '<iframe src="https://www.syncfusion.com/products/essential-js2" id="tooltipFrame"></iframe>',
    position: 'BottomCenter',
    opensOn: 'Click',
    width: '350',
    height: '250'
});
TooltipContent.appendTo('#iframeContent');

export let dafaultData: object[] = [
    { "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 control
let maps: Maps = new Maps({
    zoomSettings: {
        enable: false
    },
    legendSettings: {
        visible: false
    },
    width: '336',
    height: '235',
    layers: [
        {
            shapeData: new 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
let map: HTMLElement = document.createElement("div");
maps.appendTo(map);

//Render map tooltip
let mapTooltip: Tooltip = new Tooltip({
    opensOn: 'Click',
    position: 'BottomCenter',
    cssClass: 'mapTooltip',
    content: map,
    width: '350',
    height: '250'
});
mapTooltip.appendTo('#Map');
<!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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-maps/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <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>
</body>

</html>
#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;
}