Dynamic tooltip content with html elements in React Tooltip component
18 Jan 20236 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.
content: '<iframe src="https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard"></iframe>'
Use the following steps to render ej2-map
in tooltip:
- Initialize the map component and create an element. After initialization, append the map object to the element.
- Set the rendered map element to the content of tooltip component. Refer to the following sample.
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;
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;
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'));
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'));