Search results

How To

Show Tooltip on disabled elements

By default, Tooltips will not be displayed on disabled elements. However, it is possible to enable this behavior by following the steps below.

  1. Add a disabled element like the button element into a div whose display style is set to inline-block.
  2. Set the pointer event as none for the disabled element (button) through CSS.
  3. Now, initialize the Tooltip for outer div element that holds the disabled button element.
Source
Preview
index.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent, SwitchComponent } from '@syncfusion/ej2-react-buttons';

class App extends React.Component<{}, {}> {
  private tooltip: TooltipComponent = null as any;
  private change(args: ChangeEventArgs) {
    if (!args.checked) {
      this.tooltip.destroy();
    } else {
      this.tooltip.render();
    }
  }
  render() {
    let box: object = {
      display: "inline-block"
    };
    let position: object = {
      position: "relative",
      top: "75px",
      transform: "translateX(-10%)"
    };
    let padding: object = {
      padding: "0 25px 0 0"
    };
    let inline: object = {
      display: "inline-block "
    };
    let margin: object = {
      margin: "50px"
    };
    return (
      <div id="container">
        <div id="box" style={box}>
          <TooltipComponent id="box" content="Tooltip from disabled element">
            <ButtonComponent id="disabledbutton" disabled={true}>
              Disabled button
            </ButtonComponent>
          </TooltipComponent>
        </div>
        <div style={position}>
          <TooltipComponent
            content="Tooltip Content"
            target="#tooltip"
            style={inline}
            ref={d => (this.tooltip = d as any)}
          >
            <ButtonComponent id="tooltip" style={margin}>
              Show Tooltip
            </ButtonComponent>
          </TooltipComponent>
          <div className="switchContainer">
            <label htmlFor="checked" style={padding}>
              Enable Tooltip
            </label>
            <SwitchComponent
              id="checked"
              checked={true}
              change={this.change.bind(this) as any}
            />
          </div>
        </div>
      </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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
#container {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 75px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#disabledbutton {
    pointer-events: none;
    font-size: 22px;
    padding: 10px;
}

.e-tooltip-wrap.e-popup .e-tip-content {
    padding: 10px;
    font-size: 14px;
}

#tooltip {
    position: relative;
    transform: translateX(-50%);
}

.switchContainer {
    vertical-align: sub;
    display: inline-block;
    position: relative;
    left: 3%;
}

Load HTML pages into tooltip

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://www.syncfusion.com/products/essential-js2"></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.
Source
Preview
index.tsx
index.html
index.css
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

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>
    );
  }
}
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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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%);
}

Define tooltip open mode property

The open mode property of tooltip can be defined on a target that is hovering, focusing, or clicking. Tooltip component have the following types of open mode: * Auto * Hover * Click * Focus * Custom

** Auto **

Tooltip appears when you hover over the target or when the target element receives the focus.

** Hover **

Tooltip appears when you hover over the target.

** Click **

Tooltip appears when you click a target element.

** Focus **

Tooltip appears when you focus (say through tab key) on a target element.

** Custom **

Tooltip is not triggered by any default action. So, bind your own events and use either open or close public methods.

Source
Preview
index.tsx
index.html
index.css
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

export default class App extends React.Component<{}, {}> {
  customTooltip: TooltipComponent = null as any;
  private handleDoubleClick(args: any): void {
    if (args.target.getAttribute("data-tooltip-id")) {
      this.customTooltip.close();
    } else {
      this.customTooltip.open(args.target);
    }
  }
  render() {
    return (
      <div id="showTooltip">
        <div id="first">
          <TooltipComponent
            opensOn="Hover"
            content="Tooltip from hover"
            position="BottomCenter"
          >
            <ButtonComponent
              className="blocks"
              id="tooltiphover"
              cssClass="e-outline"
              isPrimary={true}
            >
              Hover me
            </ButtonComponent>
          </TooltipComponent>
          <TooltipComponent
            opensOn="Click"
            content="Tooltip from click"
            position="BottomCenter"
          >
            <ButtonComponent
              className="blocks"
              id="tooltipclick"
              cssClass="e-outline"
              isPrimary={true}
            >
              Click me
            </ButtonComponent>
          </TooltipComponent>
        </div>
        <br />
        <br />
        <div id="second">
          <TooltipComponent
            content="Click close icon to close me"
            position="BottomCenter"
            isSticky={true}
          >
            <ButtonComponent
              className="blocks"
              id="tooltipclick"
              cssClass="e-outline"
              isPrimary={true}
            >
              Sticky mode
            </ButtonComponent>
          </TooltipComponent>
          <TooltipComponent
            content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>"
            position="BottomCenter"
            openDelay="1000"
            closeDelay="1000"
          >
            <ButtonComponent
              className="blocks"
              id="tooltipclick"
              cssClass="e-outline"
              isPrimary={true}
            >
              Tooltip with delay
            </ButtonComponent>
          </TooltipComponent>
        </div>
        <br />
        <br />
        <div id="third">
          <TooltipComponent
            content="Tooltip from custom mode"
            ref={tooltip => {
              this.customTooltip = tooltip as any;
            }}
            position="BottomCenter"
            opensOn="Custom"
          >
            <button
              className="blocks e-primary e-outline e-btn"
              id="tooltipcustom"
              onDoubleClick={this.handleDoubleClick.bind(this)}
            >
              Double Click on Me
            </button>
          </TooltipComponent>
          <TooltipComponent content="Tooltip from focus" position="BottomCenter">
            <div id="textbox" className="e-float-input blocks">
              <input id="focus" type="text" placeholder="Focus and blur" />
            </div>
          </TooltipComponent>
        </div>
      </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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#first,
#second,
#third {
    display: inline-flex;
}

#textbox {
    display: inline-block;
    top: -3px;
}

.blocks {
    margin: 0 10px 0 10px;
    text-transform: none;
    width: 168px;
}

#showTooltip {
    display: table;
    padding-top: 40px;
    margin: 0 auto;
}

#focus {
    border: 1px solid #ff4081;
    text-align: center;
    height: 31px;
    width: 168px;
}

/* csslint ignore:start */

::placeholder {
    color: #ff4081;
}

/* csslint ignore:end */

Customize tooltip

The arrow of the tooltip can be customized as needed by customizing CSS in the sample-side. The EJ2 tooltip component is achieved through CSS3 format and positioned the tip arrow according to the tooltip positions like TopCenter, BottomLeft, RightTop, and more.

Here, the tip arrow is customized as Curved tooltip and Bubble tooltip.

** Curved tip **

The content for the tip pointer arrow has been added. To customize the curved tip arrow, override the following CSS class of tip arrow.

 <TooltipComponent content='Tooltip Content' cssClass='curvetips e-tooltip-css'>
    </TooltipComponent>
  .e-arrow-tip-outer.e-tip-bottom,
  .e-arrow-tip-outer.e-tip-top {
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
  }
  .e-arrow-tip.e-tip-top {
        transform: rotate(170deg);
  }

** Bubble tip **

The two divs(inner div and outer div) have been added to achieve the bubble tip arrow. To customize the bubble tip arrow, override the following CSS class of tip arrow.

  <TooltipComponent content='Tooltip Content' cssClass='bubbletip e-tooltip-css'>
  </TooltipComponent>
    .e-arrow-tip-outer.e-tip-bottom, .e-arrow-tip-outer.e-tip-top
    {
      border-radius: 50px;
      height: 10px;
      width: 10px;
    }

    .e-arrow-tip-inner.e-tip-bottom, .e-arrow-tip-inner.e-tip-top
    {
      border-radius: 50px;
      height: 10px;
      width: 10px;
    }

These tip arrow customizations have been achieved through CSS changes in the sample level. The tooltip position can be changed by using the radio button click event.

The arrow tip pointer can also be disabled by using the showTipPointer property in a tooltip.

Source
Preview
index.tsx
index.html
index.css
index.jsx
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import {
  ButtonComponent,
  RadioButtonComponent,
  ChangeArgs,
} from '@syncfusion/ej2-react-buttons';

class App extends React.Component<{}, {}> {
  render() {
    let tooltip: TooltipComponent;
    let bubble: TooltipComponent;

    function onChange(args: ChangeArgs): void {
      tooltip.position = args.value as any;
      tooltip.dataBind();
    }

    function onChanged(args: ChangeArgs): void {
      bubble.position = args.value as any;
      if (bubble.position == "BottomLeft") {
        bubble.offsetY = -30;
      } else {
        bubble.offsetY = 0;
      }
      bubble.dataBind();
    }
    return (
      <div id="container">
        <TooltipComponent
          cssClass="curvetips e-tooltip-css"
          content="Tooltip arrow customized"
          target="#target"
          ref={d => (tooltip = d as any)}
        >
          <TooltipComponent
            cssClass="bubbletip e-tooltip-css"
            content="Tooltip arrow customized as balloon tip"
            target="#bubbletip"
            position="TopRight"
            ref={d => (bubble = d as any)}
          >
            <TooltipComponent
              cssClass="pointertip e-tooltip-css"
              mouseTrail={true}
              target="#tooltip"
              content="Disabled tooltip pointer"
              showTipPointer={false}
            >
              <div id="customization" className="customTipContainer">
                <ButtonComponent id="target">Customized Tip Arrow</ButtonComponent>
                <div id="positions">
                  <ul>
                    <li>
                      <RadioButtonComponent
                        id="element1"
                        label="TopCenter"
                        name="default"
                        checked={true}
                        value="TopCenter"
                        change={onChange as any}
                      />
                    </li>
                    <li>
                      <RadioButtonComponent
                        id="element2"
                        label="BottomLeft"
                        name="default"
                        value="BottomLeft"
                        change={onChange as any}
                      />
                    </li>
                  </ul>
                </div>
              </div>
              <div id="balloon" className="customTipContainer">
                <ButtonComponent id="bubbletip">Bubble Tip Arrow</ButtonComponent>
                <div id="btn">
                  <ul>
                    <li>
                      <RadioButtonComponent
                        id="radio1"
                        label="BottomLeft"
                        name="position"
                        value="BottomLeft"
                        change={onChanged as any}
                      />
                    </li>
                    <li>
                      <RadioButtonComponent
                        id="radio2"
                        label="TopRight"
                        name="position"
                        value="TopRight"
                        checked={true}
                        change={onChanged as any}
                      />
                    </li>
                  </ul>
                </div>
              </div>
              <div id="disabledContainer" className="customTipContainer">
                <ButtonComponent id="tooltip">Disabled Tip Arrow</ButtonComponent>
              </div>
            </TooltipComponent>
          </TooltipComponent>
        </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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }

  #bubbletip {
    border-color: #d2a679;
  }

  #target {
    border-color: #e86238;
  }

  li {
    list-style: none;
  }

  .e-radio-wrapper {
    margin-top: 18px;
  }

  #target,
  #bubbletip,
  #tooltip {
    box-sizing: border-box;
    padding: 20px;
    width: 200px;
    text-align: center;
    top: -17px;
    margin-bottom: 40px;
  }

  /* csslint ignore:start */

  @font-face {
    font-family: "tip";
    src: url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.tff") format("truetype"), url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.woff") format("woff"), url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.eot") format("eot"), url("https://ej2.syncfusion.com/products/typescript/tooltip/customization/Fonts/tip.svg?#tip") format("svg");
    font-weight: normal;
    font-style: normal;
  }

  /* csslint ignore:end */

  /* csslint ignore:start */

  #container {
    width: 100%;
  }

  .customTipContainer {
    width: 400px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 70px;
  }

  #disabledContainer {
    margin-top: 25px;
  }

  .pointertip.e-tooltip-wrap .e-tip-content,
  .curvetips.e-tooltip-wrap .e-tip-content {
    color: white;
  }

  .pointertip.e-tooltip-wrap.e-popup {
    background-color: #80180d;
    border: 3px solid #ff9999;
  }

  .curvetips .e-arrow-tip.e-tip-top {
    margin-left: -20px;
    top: -16px;
    transform: rotate(177deg);
    left: 50px;
  }

  .curvetips.e-tooltip-wrap {
    padding: 17px;
    border-radius: 5px;
  }

  .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom:before,
  .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top:before {
    font-family: "tip" !important;
    speak-as: none;
    font-size: 21px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e700";
    color: #e86238;
  }

  .curvetips.e-tooltip-wrap.e-popup {
    background: #e86238;
    border: none;
  }

  .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom,
  .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-left: none;
    border-right: none;
    border-top: none;
  }

  .curvetips.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom:before,
  .curvetips.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top:before {
    content: none;
  }

  .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom,
  .curvetips.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    top: -1px;
  }

  .curvetips.e-tooltip-wrap .e-arrow-tip.e-tip-bottom,
  .curvetips.e-tooltip-wrap .e-arrow-tip.e-tip-top {
    position: absolute;
    height: 18px;
    width: 28px;
  }

  #positions {
    display: inline-block;
  }

  #btn {
    display: inline-block;
  }

  #target .e-tip-content {
    padding: 0px;
  }

  .bubbletip.e-tooltip-wrap {
    padding: 8px;
  }

  .bubbletip.e-tooltip-wrap .e-tip-content {
    border-radius: 50%;
    text-align: center;
    color: white;
  }

  .bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
    height: 40px;
    width: 50px;
  }

  .bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
    height: 40px;
    width: 40px;
  }

  .bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
    height: 12px;
    width: 20px;
  }

  .bubbletip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
    height: 12px;
    width: 20px;
  }

  .bubbletip.e-tooltip-wrap.e-popup {
    border: 5px solid #dfccad;
    background-color: #7b5e32;
  }

  .bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
    height: 10px;
    width: 10px;
    border: 1px solid #dfccad;
    background-color: #7b5e32;
    border-radius: 50px;
    margin-top: 20px;
    margin-right: 20px;
  }

  .e-arrow-tip.e-tip-top {
    margin-left: 60px;
  }

  .bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border: 1px solid #dfccad;
    border-radius: 50px;
    background-color: #7b5e32;
    width: 10px;
    height: 10px;
    margin-left: 20px;
  }

  .bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
    border-bottom: 6px solid transparent;
    border-right: 20px solid #dfccad;
    border-top: 6px solid transparent;
  }

  .bubbletip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
    border-bottom: 6px solid transparent;
    border-left: 20px solid #dfccad;
    border-top: 6px solid transparent;
  }

  .bubbletip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
    margin-top: -2px;
    margin-left: 8px;
    content: none;
    top: 1px !important;
    border: 2px solid #dfccad;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color: #7b5e32;
  }

  .bubbletip .e-arrow-tip.e-tip-top {
    left: 44px !important;
    top: -19px !important;
  }

  .bubbletip .e-arrow-tip.e-tip-bottom {
    top: 88.9% !important;
    left: 4px !important;
  }

  .bubbletip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
    top: 10px !important;
    border: 2px solid #dfccad;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color: #7b5e32;
  }

  .bubbletip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top:before {
    content: None;
  }

  .bubbletip.e-tooltip-wrap .e-tip-content {
    border-radius: inherit;
  }

  .bubbletip.e-tooltip-wrap.bubbletip {
    width: 150px !important;
    border-radius: 50%;
  }

  /* csslint ignore:end */
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent, RadioButtonComponent, } from '@syncfusion/ej2-react-buttons';
class App extends React.Component {
    render() {
        let tooltip;
        let bubble;
        function onChange(args) {
            tooltip.position = args.value;
            tooltip.dataBind();
        }
        function onChanged(args) {
            bubble.position = args.value;
            if (bubble.position == "BottomLeft") {
                bubble.offsetY = -30;
            }
            else {
                bubble.offsetY = 0;
            }
            bubble.dataBind();
        }
        return (<div id="container">
        <TooltipComponent cssClass="curvetips e-tooltip-css" content="Tooltip arrow customized" target="#target" ref={d => (tooltip = d)}>
          <TooltipComponent cssClass="bubbletip e-tooltip-css" content="Tooltip arrow customized as balloon tip" target="#bubbletip" position="TopRight" ref={d => (bubble = d)}>
            <TooltipComponent cssClass="pointertip e-tooltip-css" mouseTrail={true} target="#tooltip" content="Disabled tooltip pointer" showTipPointer={false}>
              <div id="customization" className="customTipContainer">
                <ButtonComponent id="target">Customized Tip Arrow</ButtonComponent>
                <div id="positions">
                  <ul>
                    <li>
                      <RadioButtonComponent id="element1" label="TopCenter" name="default" checked={true} value="TopCenter" change={onChange}/>
                    </li>
                    <li>
                      <RadioButtonComponent id="element2" label="BottomLeft" name="default" value="BottomLeft" change={onChange}/>
                    </li>
                  </ul>
                </div>
              </div>
              <div id="balloon" className="customTipContainer">
                <ButtonComponent id="bubbletip">Bubble Tip Arrow</ButtonComponent>
                <div id="btn">
                  <ul>
                    <li>
                      <RadioButtonComponent id="radio1" label="BottomLeft" name="position" value="BottomLeft" change={onChanged}/>
                    </li>
                    <li>
                      <RadioButtonComponent id="radio2" label="TopRight" name="position" value="TopRight" checked={true} change={onChanged}/>
                    </li>
                  </ul>
                </div>
              </div>
              <div id="disabledContainer" className="customTipContainer">
                <ButtonComponent id="tooltip">Disabled Tip Arrow</ButtonComponent>
              </div>
            </TooltipComponent>
          </TooltipComponent>
        </TooltipComponent>
      </div>);
    }
}
ReactDom.render(<App />, document.getElementById('sample'));

Display tooltip on SVG and canvas elements

Tooltip can be displayed on both SVG and Canvas elements. You can directly attach the <svg> or <canvas> elements to show tooltips on data visualization elements.

** SVG **

Create the SVG square element and refer to the following code snippet to render the tooltip on SVG square.

  <TooltipComponent content='SVG Square' cssClass='e-tooltip-css' target= '#square'>
  </TooltipComponent>

** Canvas **

Create the canvas circle element and refer to the following code snippet to render the tooltip on Canvas circle.

<TooltipComponent content='Canvas Circle' cssClass='e-tooltip-css' target= '#circle'>
  </TooltipComponent>
Source
Preview
index.tsx
index.html
index.css
index.jsx
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import {
  ButtonComponent,
  RadioButtonComponent,
  ChangeArgs,
} from '@syncfusion/ej2-react-buttons';

class App extends React.Component<{}, {}> {
  componentDidMount() {
    const circle: any = this.refs.circle;
    const tri: any = this.refs.tri;
    let context;
    if (tri.getContext) {
      context = tri.getContext("2d");
      context.beginPath();
      context.moveTo(0, 50);
      context.lineTo(100, 50);
      context.lineTo(50, 0);
      context.fillStyle = "#FDA600";
      context.fill();
    }
    if (circle.getContext) {
      context = circle.getContext("2d");
      let centerX: number = circle.width / 2;
      let centerY: number = circle.height / 2;
      let radius: number = 30;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = "#0450C2";
      context.fill();
    }
  }
  render() {
    return (
      <div id="container">
        <TooltipComponent content="SVG Ellipse" cssClass="e-tooltip-css" target="#ellipse">
          <TooltipComponent content="SVG Polyline" cssClass="e-tooltip-css" target="#polyline">
            <TooltipComponent
              content="Canvas Circle"
              cssClass="e-tooltip-css"
              target="#circle"
            >
              <TooltipComponent
                content="Canvas Triangle"
                cssClass="e-tooltip-css"
                target="#triangle"
              >
                <TooltipComponent
                  content="SVG Square"
                  cssClass="e-tooltip-css"
                  target="#square"
                >
                  <div id="box" className="e-prevent-select">
                    <div
                      className="circletool"
                      id="rectShape"
                      style={{ left: "1%", top: "10%" }}
                    >
                      <svg>
                        <rect
                          id="square"
                          className="shape"
                          x="50"
                          y="20"
                          width="50"
                          height="50"
                          style={{
                            fill: "#FDA600",
                            stroke: "none",
                            strokeWidth: "5",
                            strokeOpacity: 0.9
                          }}
                        />
                      </svg>
                    </div>
                    <div className="circletool" id="ellipseShape" style={{ top: "65%" }}>
                      <svg>
                        <ellipse
                          id="ellipse"
                          className="shape"
                          cx="100"
                          cy="50"
                          rx="20"
                          ry="40"
                          style={{
                            fill: "#0450C2",
                            stroke: "none",
                            strokeWidth: "2"
                          }}
                        />
                      </svg>
                    </div>
                    <div
                      className="circletool"
                      id="polyShape"
                      style={{ top: "25%", left: "40%", position: "absolute" }}
                    >
                      <svg>
                        <polyline
                          id="polyline"
                          className="shape"
                          points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
                          style={{
                            fill: "#ffffff",
                            stroke: "#0450C2",
                            strokeWidth: "4"
                          }}
                        />
                      </svg>
                    </div>
                    <div
                      className="circletool"
                      id="circleShape"
                      style={{ top: "16%", left: "72%", position: "absolute" }}
                    >
                      <canvas
                        id="circle"
                        ref="circle"
                        className="shape"
                        width="60"
                        height="60"
                      />
                    </div>
                    <div
                      className="circletool"
                      id="triShape"
                      style={{ top: "73%", left: "76%" }}
                    >
                      <canvas
                        id="triangle"
                        ref="tri"
                        className="shape"
                        width="100"
                        height="50"
                      />
                    </div>
                  </div>
                </TooltipComponent>
              </TooltipComponent>
            </TooltipComponent>
          </TooltipComponent>
        </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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }

  @media (max-width: 500px) {
    #rectShape {
      /* csslint ignore:start */
      left: -11% !important;
      /* csslint ignore:end */
    }
    #ellipseShape {
      /* csslint ignore:start */
      left: -20% !important;
      /* csslint ignore:end */
    }
    #polyShape {
      /* csslint ignore:start */
      left: 28% !important;
      /* csslint ignore:end */
    }
    #circleShape {
      /* csslint ignore:start */
      left: 68% !important;
      /* csslint ignore:end */
    }
    #triShape {
      /* csslint ignore:start */
      left: 65% !important;
      /* csslint ignore:end */
    }
  }

  @media (min-width: 500px) and (max-width: 600px) {
    #triShape {
      /* csslint ignore:start */
      left: 70% !important;
      /* csslint ignore:end */
    }
  }

  #container {
    width: 80%;
    margin: 0 auto;
  }

  .e-tooltip-css {
    filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.25));
  }

  #control-container {
    /* csslint ignore:start */
    padding: 0 !important;
    /* csslint ignore:end */
  }

  #box {
    background: #ffffff;
    box-sizing: border-box;
    height: 320px;
    position: relative;
  }

  .circletool {
    position: absolute;
  }
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component {
    componentDidMount() {
        const circle = this.refs.circle;
        const tri = this.refs.tri;
        let context;
        if (tri.getContext) {
            context = tri.getContext("2d");
            context.beginPath();
            context.moveTo(0, 50);
            context.lineTo(100, 50);
            context.lineTo(50, 0);
            context.fillStyle = "#FDA600";
            context.fill();
        }
        if (circle.getContext) {
            context = circle.getContext("2d");
            let centerX = circle.width / 2;
            let centerY = circle.height / 2;
            let radius = 30;
            context.beginPath();
            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            context.fillStyle = "#0450C2";
            context.fill();
        }
    }
    render() {
        return (<div id="container">
        <TooltipComponent content="SVG Ellipse" cssClass="e-tooltip-css" target="#ellipse">
          <TooltipComponent content="SVG Polyline" cssClass="e-tooltip-css" target="#polyline">
            <TooltipComponent content="Canvas Circle" cssClass="e-tooltip-css" target="#circle">
              <TooltipComponent content="Canvas Triangle" cssClass="e-tooltip-css" target="#triangle">
                <TooltipComponent content="SVG Square" cssClass="e-tooltip-css" target="#square">
                  <div id="box" className="e-prevent-select">
                    <div className="circletool" id="rectShape" style={{ left: "1%", top: "10%" }}>
                      <svg>
                        <rect id="square" className="shape" x="50" y="20" width="50" height="50" style={{
            fill: "#FDA600",
            stroke: "none",
            strokeWidth: "5",
            strokeOpacity: 0.9
        }}/>
                      </svg>
                    </div>
                    <div className="circletool" id="ellipseShape" style={{ top: "65%" }}>
                      <svg>
                        <ellipse id="ellipse" className="shape" cx="100" cy="50" rx="20" ry="40" style={{
            fill: "#0450C2",
            stroke: "none",
            strokeWidth: "2"
        }}/>
                      </svg>
                    </div>
                    <div className="circletool" id="polyShape" style={{ top: "25%", left: "40%", position: "absolute" }}>
                      <svg>
                        <polyline id="polyline" className="shape" points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style={{
            fill: "#ffffff",
            stroke: "#0450C2",
            strokeWidth: "4"
        }}/>
                      </svg>
                    </div>
                    <div className="circletool" id="circleShape" style={{ top: "16%", left: "72%", position: "absolute" }}>
                      <canvas id="circle" ref="circle" className="shape" width="60" height="60"/>
                    </div>
                    <div className="circletool" id="triShape" style={{ top: "73%", left: "76%" }}>
                      <canvas id="triangle" ref="tri" className="shape" width="100" height="50"/>
                    </div>
                  </div>
                </TooltipComponent>
              </TooltipComponent>
            </TooltipComponent>
          </TooltipComponent>
        </TooltipComponent>
      </div>);
    }
}
ReactDom.render(<App />, document.getElementById('sample'));

Create and show tooltip on multiple targets

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.

Source
Preview
index.tsx
index.html
index.css
index.jsx
tooltip.jsx
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';

class App extends React.Component<{}, {}> {
  tooltip: TooltipComponent = null as any;
  private beforeRender(args: any) {
    this.tooltip.content = "Loading...";
    this.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 */
            this.tooltip.content = result[i].Name;
            /* tslint:enable */
          }
        }
        this.tooltip.dataBind();
      },
      (reason: any) => {
        this.tooltip.content = reason.message;
        this.tooltip.dataBind();
      }
    );
  }
  render() {
    return (
      <div id="container">
        <TooltipComponent
          beforeRender={this.beforeRender.bind(this)}
          content="Loading..."
          target=".circletool"
          position="BottomCenter"
          showTipPointer={false}
          ref={i => (this.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>
    );
  }
}
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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
#container {
  margin-top: 100px;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

h2 {
  text-align: center;
  margin-bottom: 50px;
}

#box {
  height: 80px;
  position: relative;
  text-align: center;
}

.circletool {
  height: 32px;
  width: 32px;
  margin: 8px;
  display: inline-block;
}

.underline-02 {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23000000' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9.4685001373291,8) scale(0.5,0.5) ' fill='%23FFFFFF' d='M3.4180251,28.362L22.712003,28.362 22.712003,32 3.4180251,32z M16.780006,0L26.126,0 26.126,1.6599731 24.738978,1.6599731C23.977016,1.6599731 23.436978,1.9559937 23.024991,2.5900269 22.936002,2.723999 22.738004,3.1849976 22.738004,4.8179932L22.738004,14.367981C22.738004,16.776001 22.495025,18.684021 22.011993,20.041992 21.501983,21.440979 20.50998,22.655029 19.051974,23.64502 17.605992,24.632996 15.618996,25.127014 13.168987,25.127014 10.511032,25.127014 8.4430419,24.646973 7.0330101,23.703003 5.6169964,22.76001 4.5989924,21.466003 4.0070134,19.862976 3.6140085,18.765991 3.4139965,16.812988 3.4139968,13.888977L3.4139968,4.6790161C3.4139965,2.9509888 3.1200517,2.3649902 2.950008,2.164978 2.6440392,1.8289795 2.1230438,1.6589966 1.3900127,1.6589966L0,1.6589966 0,0.0009765625 11.186996,0.0009765625 11.186996,1.6589966 9.7790385,1.6589966C8.9750233,1.6589966 8.4330321,1.8850098 8.1130257,2.3590088 7.9830209,2.5510254 7.7700082,3.0949707 7.7700082,4.6790161L7.7700082,14.948975C7.7700082,15.838989 7.8470345,16.872009 8.0129891,18.026001 8.1730233,19.130005 8.4490233,19.984985 8.8450194,20.572021 9.2380238,21.161987 9.8149882,21.653015 10.558029,22.039978 11.313033,22.426025 12.25401,22.622009 13.381023,22.622009 14.827982,22.622009 16.134009,22.304993 17.26798,21.677979 18.374974,21.065979 19.141025,20.280029 19.545016,19.346008 19.957978,18.364014 20.16501,16.638 20.16501,14.218018L20.16501,4.6779785C20.16501,2.8049927 19.894992,2.3480225 19.808017,2.2509766 19.459994,1.8510132 18.920016,1.6589966 18.171971,1.6589966L16.780006,1.6589966 16.780006,0.0009765625z' /%3e%3c/g%3e%3c/svg%3e ");
}

.bold-01 {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23000000' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(8.00000047683716,8) scale(0.5,0.5) ' fill='%23FFFFFF' d='M14.847002,16.674988C13.794,16.674988 12.893998,16.690002 12.148999,16.719971 11.572,16.75 11.086,16.779968 10.686998,16.839966L10.686998,29.120972C12.543,29.495972 14.391001,29.690979 16.178998,29.690979 19.166,29.690979 21.461002,29.075989 23.007003,27.875977 24.536002,26.70697 25.311,25.221985 25.311,23.482971 25.311,22.328003 24.955001,21.203003 24.260001,20.138977 23.570003,19.088989 22.422,18.234009 20.847003,17.619995 19.247001,17.005005 17.230001,16.674988 14.847002,16.674988z M14.925001,2.2189941C13.375001,2.2189941,11.948999,2.3689575,10.686998,2.6539917L10.686998,14.140015C11.231,14.230957 11.836,14.289978 12.502999,14.334961 13.309999,14.394958 14.191,14.411011 15.154001,14.411011 17.586,14.411011 19.428001,14.185974 20.629001,13.705994 21.803001,13.255981 22.715003,12.550964 23.340003,11.620972 23.969001,10.677002 24.285003,9.6270142 24.285003,8.5169678 24.285003,6.7630005 23.513,5.322998 21.928001,4.0789795 20.350001,2.848999 17.991998,2.2189941 14.925001,2.2189941z M0,0L15.384001,0C18.208003,0 20.503001,0.19500732 22.209003,0.57000732 24.834003,1.125 26.874,2.1589966 28.273002,3.6140137 29.675002,5.0830078 30.387,6.7929688 30.387,8.6969604 30.387,10.33197 29.826003,11.815979 28.719001,13.120972 27.827003,14.170959 26.578002,14.994995 24.998,15.609985 26.888,16.089966 28.363998,16.765015 29.395003,17.648987 31.123,19.118958 31.999999,20.947998 31.999999,23.092957 31.999999,24.69696 31.426002,26.271973 30.295005,27.740967 29.161002,29.226013 27.591003,30.320984 25.622001,30.994995 23.683002,31.654968 20.702003,32 16.771001,32L0,32 0,30.469971 1.6809998,30.469971C3.0099984,30.469971 3.932999,30.110962 4.4949995,29.360962 4.7329985,29.045959 5.0229994,28.205994 5.0229994,26.106995L5.0229994,5.8779907C5.0229994,3.5839844 4.6679999,2.7290039 4.370999,2.4289551 3.776997,1.8289795 2.8939973,1.5289917 1.6809998,1.5289917L0,1.5289917z' /%3e%3c/g%3e%3c/svg%3e ");
}

.italic {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23000000' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9,8) scale(0.5,0.5) ' fill='%23FFFFFF' d='M8,0L28,0 28,4 18,4 13.200012,28 20,28 20,32 0,32 0,28 9.4000244,28 14.400024,4 8,4z' /%3e%3c/g%3e%3c/svg%3e ");
}

.cut-02 {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23000000' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(10.9177500107586,8) scale(0.499999940395362,0.499999940395362) ' fill='%23FFFFFF' d='M4.2434211,24.486929C3.1234166,24.487921 1.9864136,25.411931 1.5303855,26.803925 1.2234067,27.730923 1.2683899,28.699915 1.6553864,29.461907 1.9403927,30.015906 2.3644075,30.402913 2.8894059,30.568913 4.1804323,31.000903 5.6704354,30.001914 6.2174368,28.350916 6.756443,26.700928 6.1504502,25.008931 4.8604307,24.58393 4.6584334,24.51792 4.4514308,24.486929 4.2434211,24.486929z M16.081534,24.483923C15.874531,24.484931 15.66753,24.516928 15.465532,24.58393 14.173498,25.008931 13.569489,26.700928 14.107519,28.350916 14.655497,30.001914 16.144522,30.993914 17.436526,30.568913 17.961554,30.402913 18.385539,30.015906 18.670546,29.461907 19.057541,28.699915 19.099534,27.730923 18.795546,26.803925 18.338541,25.411931 17.202546,24.481925 16.081534,24.483923z M3.8974099,0L10.162478,12.849954 16.428523,0C16.830533,0.04499804 17.086548,0.76598901 15.822529,5.3079834 14.713511,9.3009687 12.318502,14.999957 11.838487,16.182951 13.408507,19.674946 12.730492,19.907948 14.43052,21.300934 15.510515,22.189938 17.086548,23.035929 17.874548,23.649926 18.846541,24.189932 19.656546,25.15392 20.062556,26.394928 20.481566,27.649914 20.40057,28.986916 19.860558,30.066916 19.422566,30.927905 18.706557,31.561905 17.854529,31.839905 15.865529,32.497908 13.771517,31.059908 12.844507,28.767909 12.253499,27.298918 12.61248,23.269938 12.232502,21.840941 11.977496,20.886933 11.025491,19.689946 10.162478,18.668938 9.2984566,19.689946 8.3464532,20.886933 8.0924525,21.840941 7.7134518,23.262934 8.0704493,27.298918 7.4794411,28.767909 6.5534382,31.059908 4.4594264,32.488905 2.4743941,31.839905 1.6173919,31.555909 0.90339658,30.927905 0.46540476,30.066916 -0.075615607,28.986916 -0.14760718,27.649914 0.26337645,26.386918 0.66837875,25.15392 1.4873858,24.189932 2.4573953,23.649926 3.2464034,23.035929 4.8154168,22.189938 5.8954434,21.300934 7.5944628,19.899937 6.9164481,19.674946 8.5144534,16.236952 8.0044703,14.999957 5.6114445,9.3009687 4.501419,5.3079834 3.2384078,0.76598901 3.495429,0.04499804 3.8974099,0z' /%3e%3c/g%3e%3c/svg%3e ");
}

.copy {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23000000' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9.6852502822876,8) scale(0.5,0.5) ' fill='%23FFFFFF' d='M15.844,11.559021L15.844,15.695984C15.844,15.695984,15.764998,18.413025,12.761999,18.177002L9.253997,18.194031 9.253997,29.643982C9.253997,29.908997,9.4619972,30.117004,9.7219984,30.117004L22.904995,30.117004C23.163998,30.117004,23.371998,29.90802,23.371998,29.643982L23.374996,29.643982 23.374996,12.026978C23.374996,11.768982,23.166996,11.559021,22.906994,11.559021z M10.267996,2.28302L10.267996,7.3029785C10.267996,7.3029785,10.176001,10.598999,6.5360023,10.315002L2.2779993,10.333008 2.2779993,24.223022C2.2779995,24.536987,2.5360028,24.79303,2.8560022,24.79303L7.368003,24.79303 7.368003,17.700012 13.235998,11.47998 13.251997,11.47998 14.971998,9.6740112 19.405996,9.6740112 19.405996,2.8499756C19.405996,2.5369873,19.151999,2.28302,18.835997,2.28302z M9.2209999,0L18.837996,0C20.415999,0,21.695997,1.2789917,21.695997,2.8530273L21.695997,9.677002 22.902996,9.677002 22.905995,9.6749878C24.202999,9.6749878,25.258999,10.728027,25.258999,12.028015L25.258999,29.643982C25.258999,30.945984,24.202999,32,22.905995,32L9.7229978,32C8.4230033,32,7.3690025,30.944031,7.3690025,29.643982L7.3690025,27.078003 2.8570017,27.078003C1.2770001,27.078003,-1.3611906E-07,25.798035,1.4210855E-14,24.221985L1.4210855E-14,9.7319946 7.1129981,2.1940308 7.140998,2.1940308z' /%3e%3c/g%3e%3c/svg%3e ");
}

.paste {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' height='32' width='32' viewBox='0 0 32 32'%3e%3cg%3e%3crect height='32' width='32' fill='%23000000' /%3e%3cpath id='path1' transform='rotate(0,16,16) translate(9,8) scale(0.5,0.5) ' fill='%23FFFFFF' d='M14,18L14,30 26,30 26,22 22,22 22,18z M12,16L24,16 24,18 26,18 26,20 28,20 28,32 12,32z M0,2L2,2 2,6 20,6 20,2 22,2 22,14 10,14 10,30 0,30z M8,0L14,0 14,2 16,2 16,4 6,4 6,2 8,2z' /%3e%3c/g%3e%3c/svg%3e ");
}
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Ajax } from '@syncfusion/ej2-base';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.tooltip = null;
    }
    beforeRender(args) {
        this.tooltip.content = "Loading...";
        this.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 */
                    this.tooltip.content = result[i].Name;
                    /* tslint:enable */
                }
            }
            this.tooltip.dataBind();
        }, (reason) => {
            this.tooltip.content = reason.message;
            this.tooltip.dataBind();
        });
    }
    render() {
        return (<div id="container">
        <TooltipComponent beforeRender={this.beforeRender.bind(this)} content="Loading..." target=".circletool" position="BottomCenter" showTipPointer={false} ref={i => (this.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>);
    }
}
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"
    }
];