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.
content: '<iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></iframe>'
Use the following steps to render ej2-map
in tooltip:
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export class App extends React.Component {
iFrame() {
return <iframe src="https://www.syncfusion.com/products/essential-js2"/>;
}
render() {
return (<div id="container">
<TooltipComponent target="#iframeContent" content={this.iFrame} opensOn="Click" position="BottomCenter">
<div id="tooltipContent">
<div className="content">
<ButtonComponent className="text" id="iframeContent">
Embedded Iframe
</ButtonComponent>
</div>
</div>
</TooltipComponent>
</div>);
}
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component {
iFrame() {
return (<iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></iframe>);
}
render() {
return (<div id='container'>
<TooltipComponent ref={obj => this.tooltip = obj} target="#iframeContent" content={this.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>);
}
}
ReactDom.render(<App />, document.getElementById('sample'));
<!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="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/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>
</head>
<body>
<div id='sample'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#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%);
}
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
export class App extends React.Component<{}, {}> {
private iFrame(): JSX.Element {
return <iframe src="https://www.syncfusion.com/products/essential-js2" />;
}
render() {
return (
<div id="container">
<TooltipComponent
target="#iframeContent"
content={this.iFrame}
opensOn="Click"
position="BottomCenter"
>
<div id="tooltipContent">
<div className="content">
<ButtonComponent className="text" id="iframeContent">
Embedded Iframe
</ButtonComponent>
</div>
</div>
</TooltipComponent>
</div>
);
}
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component<{}, {}> {
private tooltip: TooltipComponent;
private iFrame(): JSX {
return(
<iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></iframe>
);
}
render() {
return (
<div id='container'>
<TooltipComponent ref={obj => this.tooltip = obj} target="#iframeContent" content={this.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>
);
}
}
ReactDom.render(<App />,document.getElementById('sample'));