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"
    }
];