Dynamic Tooltip content with html elements in React Tooltip component

28 Feb 20259 minutes to read

Tooltip can display HTML content, including elements such as iframe, video, and map using the content property. This property accepts both string and HTML tags.

To load an iframe element in the tooltip, set the required iframe in the content of Tooltip while initializing the Tooltip component. Refer to the following code example.

content: '<iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></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.

app.jsx

import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
  function iFrame() {
    return <iframe src="https://www.syncfusion.com/products/essential-js2" />;
  }
  return (<div id="container">
    <TooltipComponent target="#iframeContent" content={iFrame} opensOn="Click" position="BottomCenter">
      <div id="tooltipContent">
        <div className="content">
          <ButtonComponent className="text" id="iframeContent">
            Embedded Iframe
          </ButtonComponent>
        </div>
      </div>
    </TooltipComponent>
  </div>);
}
export default App;

app.tsx

import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  function iFrame(): JSX.Element {
    return <iframe src="https://www.syncfusion.com/products/essential-js2" />;
  }
  return (
    <div id="container">
      <TooltipComponent
        target="#iframeContent"
        content={iFrame}
        opensOn="Click"
        position="BottomCenter"
      >
        <div id="tooltipContent">
          <div className="content">
            <ButtonComponent className="text" id="iframeContent">
              Embedded Iframe
            </ButtonComponent>
          </div>
        </div>
      </TooltipComponent>
    </div>
  );
}
export default App;

index.jsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
    let tooltip;
    function iFrame() {
        return (<iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></iframe>);
    }
    return (<div id='container'>
        <TooltipComponent ref={obj => tooltip = obj} target="#iframeContent" content={iFrame} opensOn='Click' position='BottomCenter'>
            <div id="tooltipContent">
                <div className="content">
                    <button className="e-btn text" id="iframeContent">Embedded Iframe</button>
                </div>
            </div>
        </TooltipComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

index.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

function App() {
  let tooltip: TooltipComponent;

  function iFrame(): JSX {
    return (
      <iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></iframe>
    );
  }
  return (
    <div id='container'>
      <TooltipComponent ref={obj => tooltip = obj} target="#iframeContent" content={iFrame} opensOn='Click' position='BottomCenter'>
        <div id="tooltipContent">
          <div className="content">
            <button className="e-btn text" id="iframeContent">Embedded Iframe</button>
          </div>
        </div>
      </TooltipComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

index.css

#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 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%);
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tooltip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>