Create and show tooltip on multiple targets in React Tooltip component
30 Jan 202316 minutes to read
Tooltip can be created and shown on multiple targets within a container by defining the specific target elements to the target property. So, the tooltip is initialized only on matched targets within a container.
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Ajax } from '@syncfusion/ej2-base';
function App() {
let tooltip = null;
function beforeRender(args) {
tooltip.content = "Loading...";
tooltip.dataBind();
let ajax = new Ajax("./tooltip.json", "GET", true);
ajax.send().then((result) => {
result = JSON.parse(result);
for (let i = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
/* tslint:disable */
tooltip.content = result[i].Name;
/* tslint:enable */
}
}
tooltip.dataBind();
}, (reason) => {
tooltip.content = reason.message;
tooltip.dataBind();
});
}
return (<div id="container">
<TooltipComponent beforeRender={beforeRender.bind(this)} content="Loading..." target=".circletool" position="BottomCenter" showTipPointer={false} ref={i => (tooltip = i)}>
<h2> Dynamic Tooltip content </h2>
<div id="box" className="e-prevent-select">
<div id="1" className="circletool bold-01"/>
<div id="2" className="circletool italic"/>
<div id="3" className="circletool underline-02"/>
<div id="4" className="circletool cut-02"/>
<div id="5" className="circletool copy"/>
<div id="6" className="circletool paste"/>
</div>
</TooltipComponent>
</div>);
}
export default App;
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Ajax } from '@syncfusion/ej2-base';
import {
ButtonComponent,
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip: TooltipComponent = null as any;
function beforeRender(args: any) {
tooltip.content = "Loading...";
tooltip.dataBind();
let ajax: Ajax = new Ajax("./tooltip.json", "GET", true);
ajax.send().then(
(result: any) => {
result = JSON.parse(result);
for (let i: number = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
/* tslint:disable */
tooltip.content = result[i].Name;
/* tslint:enable */
}
}
tooltip.dataBind();
},
(reason: any) => {
tooltip.content = reason.message;
tooltip.dataBind();
}
);
}
return (
<div id="container">
<TooltipComponent
beforeRender={beforeRender.bind(this)}
content="Loading..."
target=".circletool"
position="BottomCenter"
showTipPointer={false}
ref={i => (tooltip = i as any)}
>
<h2> Dynamic Tooltip content </h2>
<div id="box" className="e-prevent-select">
<div id="1" className="circletool bold-01" />
<div id="2" className="circletool italic" />
<div id="3" className="circletool underline-02" />
<div id="4" className="circletool cut-02" />
<div id="5" className="circletool copy" />
<div id="6" className="circletool paste" />
</div>
</TooltipComponent>
</div>
);
}
export default App;
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Ajax } from '@syncfusion/ej2-base';
function App() {
let tooltip = null;
function beforeRender(args) {
tooltip.content = "Loading...";
tooltip.dataBind();
let ajax = new Ajax("./tooltip.json", "GET", true);
ajax.send().then((result) => {
result = JSON.parse(result);
for (let i = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
/* tslint:disable */
tooltip.content = result[i].Name;
/* tslint:enable */
}
}
tooltip.dataBind();
}, (reason) => {
tooltip.content = reason.message;
tooltip.dataBind();
});
}
return (<div id="container">
<TooltipComponent beforeRender={beforeRender.bind(this)} content="Loading..." target=".circletool" position="BottomCenter" showTipPointer={false} ref={i => (tooltip = i)}>
<h2> Dynamic Tooltip content </h2>
<div id="box" className="e-prevent-select">
<div id="1" className="circletool bold-01"/>
<div id="2" className="circletool italic"/>
<div id="3" className="circletool underline-02"/>
<div id="4" className="circletool cut-02"/>
<div id="5" className="circletool copy"/>
<div id="6" className="circletool paste"/>
</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';
import { Ajax } from '@syncfusion/ej2-base';
import {
ButtonComponent,
RadioButtonComponent,
ChangeArgs,
} from '@syncfusion/ej2-react-buttons';
function App() {
let tooltip: TooltipComponent = null as any;
function beforeRender(args: any) {
tooltip.content = "Loading...";
tooltip.dataBind();
let ajax: Ajax = new Ajax("./tooltip.json", "GET", true);
ajax.send().then(
(result: any) => {
result = JSON.parse(result);
for (let i: number = 0; i < result.length; i++) {
if (result[i].Id == args.target.id) {
/* tslint:disable */
tooltip.content = result[i].Name;
/* tslint:enable */
}
}
tooltip.dataBind();
},
(reason: any) => {
tooltip.content = reason.message;
tooltip.dataBind();
}
);
}
return (
<div id="container">
<TooltipComponent
beforeRender={beforeRender.bind(this)}
content="Loading..."
target=".circletool"
position="BottomCenter"
showTipPointer={false}
ref={i => (tooltip = i as any)}
>
<h2> Dynamic Tooltip content </h2>
<div id="box" className="e-prevent-select">
<div id="1" className="circletool bold-01" />
<div id="2" className="circletool italic" />
<div id="3" className="circletool underline-02" />
<div id="4" className="circletool cut-02" />
<div id="5" className="circletool copy" />
<div id="6" className="circletool paste" />
</div>
</TooltipComponent>
</div>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
[
{
"Id": "1",
"Name": "Bold"
},
{
"Id": "2",
"Name": "Italic"
},
{
"Id": "3",
"Name": "Underline"
},
{
"Id": "4",
"Name": "Cut"
},
{
"Id": "5",
"Name": "Copy"
},
{
"Id": "6",
"Name": "Paste"
}
];