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;
  private change(args) {
    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} >
              <ButtonComponent id="tooltip" style={margin}>Show Tooltip</ButtonComponent>
            </TooltipComponent>
            <div className="switchContainer">
                <label for="checked" style={padding}>Enable Tooltip</label>
                <SwitchComponent id="checked" checked={true} change={this.change.bind(this)}></SwitchComponent>
            </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 tooltip: TooltipComponent;

  private iFrame(): JSX {
    return(
      <iframe src="https://www.syncfusion.com/products/essential-js2"></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">
                    <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<{}, {}> {
  private handleDoubleClick(args): 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;
            }}
            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
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}
        >
          <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'));
<!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 */

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
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 = 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: 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',
                            'stroke-width': '5',
                            'stroke-opacity': '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',
                            'stroke-width': '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',
                            'stroke-width': '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;
  }

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
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<{}, {}> {
  private beforeRender(args) {
    this.content = 'Loading...';
    this.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.content = result[i].Name;
            /* tslint:enable */
          }
        }
        this.dataBind();
      },
      (reason: any) => {
        this.content = reason.message;
        this.dataBind();
      }
    );
  }
  render() {
    return (
      <div id="container">
        <TooltipComponent
          beforeRender={this.beforeRender}
          content="Loading..."
          target=".circletool"
          position="BottomCenter"
          showTipPointer={false}
          ref="tooltip"
        >
          <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: 35px;
    width: 35px;
    display: inline-block;
  }

  .underline-02 {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M16.163 34.044H31.84V37H16.163zM27.02 11h7.594v1.349h-1.127c-.62 0-1.058.24-1.393.755-.072.11-.233.484-.233 1.81v7.76c0 1.957-.197 3.507-.59 4.61-.414 1.137-1.22 2.123-2.405 2.928-1.175.802-2.79 1.204-4.78 1.204-2.16 0-3.84-.39-4.985-1.157a6.293 6.293 0 0 1-2.459-3.12c-.32-.892-.482-2.478-.482-4.854v-7.483c0-1.404-.239-1.88-.377-2.043-.248-.273-.672-.411-1.267-.411h-1.13V11h9.09v1.347h-1.144c-.653 0-1.094.184-1.354.569-.105.156-.279.598-.279 1.885v8.344c0 .723.063 1.563.198 2.5.13.897.354 1.592.676 2.069.32.48.788.878 1.392 1.192.613.314 1.378.473 2.293.473 1.176 0 2.237-.257 3.159-.767.899-.497 1.521-1.135 1.85-1.894.335-.798.503-2.2.503-4.167v-7.751c0-1.522-.219-1.893-.29-1.972-.282-.325-.721-.481-1.329-.481h-1.13V11z'/%3E%3C/svg%3E") no-repeat 100% 100%;
  }

  .bold-01 {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M18.637 25.625v6.987h3.9c1.95 0 3.088 0 3.576-.162.812-.162 1.462-.488 1.95-.975.487-.488.812-1.3.812-2.275 0-.812-.163-1.463-.488-1.95-.325-.487-.974-.975-1.625-1.138-.974-.324-2.437-.487-4.875-.487zm0-10.4V21.4h4.713c2.112 0 1.138 0 1.625-.163.975-.162 1.625-.487 2.112-.974a2.691 2.691 0 0 0 .813-1.95c0-.813-.162-1.463-.65-1.95-.488-.488-1.3-.813-2.113-.975-.487 0 .163-.163-2.274-.163zM13.762 11h9.1c2.113 0 3.575.163 4.55.325.975.162 1.95.488 2.763 1.137.813.488 1.462 1.3 1.95 2.113.488.975.812 1.95.812 3.088 0 1.137-.324 2.274-.975 3.412-.65.975-1.625 1.787-2.6 2.275 1.626.487 2.763 1.3 3.575 2.438.813 1.137 1.3 2.437 1.3 3.9 0 1.137-.324 2.274-.812 3.412-.488 1.137-1.3 1.95-2.275 2.6a7.813 7.813 0 0 1-3.575 1.3c-.813-.163-.813 0-4.063 0h-9.75z'/%3E%3C/svg%3E") no-repeat 100% 100%;
  }

  .italic {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M22.434 11h10.504l-.398 1.333-.269-.003c-.804 0-1.3.078-1.615.228-.513.232-.9.546-1.155.953-.28.431-.648 1.44-1.099 2.984l-4.417 15.298c-.484 1.71-.584 2.36-.584 2.606 0 .247.052.443.17.608.122.158.32.293.6.387.217.077.747.182 2.06.273l.404.027L26.249 37H15.063l.507-1.324.216-.009c1.248-.026 1.751-.142 1.96-.232.503-.197.865-.452 1.087-.772.391-.558.811-1.582 1.238-3.05l4.43-15.298c.367-1.235.548-2.174.548-2.789 0-.26-.053-.465-.181-.635-.123-.17-.327-.307-.59-.402-.204-.075-.688-.16-1.839-.16h-.437z'/%3E%3C/svg%3E") no-repeat 100% 100%;
  }

  .cut-02 {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M21.941 27.375c-1.393-.028-3.037 1.193-3.48 2.814-.325 1.138-.325 1.952.163 2.927.163.488.65 1.139 1.464 1.301.813.163 1.463.163 2.276-.325.651-.488 1.301-1.3 1.627-2.276.325-1.139.325-1.952-.163-2.928-.325-.487-.65-1.138-1.464-1.463a2.14 2.14 0 0 0-.423-.05zm-6.645-8.838a4.983 4.983 0 0 0-1.55.269c-.65.325-1.302.813-1.464 1.626-.163.813 0 1.464.162 1.951.651.814 1.301 1.464 2.44 1.79 2.114.65 3.903-.326 4.228-1.627.488-.976 0-1.626-.163-2.114-.65-.813-1.3-1.464-2.439-1.789a6.847 6.847 0 0 0-1.214-.106zM31.47 12.3l-5.367 9.431.164.489L37 22.546l-2.602 1.464-8.781.812-1.952.976 1.301 2.603c.488.975.488 2.276.163 3.577-.813 2.602-3.252 4.228-5.366 3.578-2.277-.488-3.415-3.09-2.603-5.692.326-1.463 1.302-2.602 2.44-3.09l2.44-1.3-.977-1.79-2.439 1.3c-1.138.49-2.44.652-3.903.327-2.602-.814-4.228-2.928-3.577-5.204.65-2.277 3.415-3.415 6.016-2.765 1.302.325 2.44 1.301 3.09 2.44l1.138 2.114 1.79-.976 5.691-7.318z'/%3E%3C/svg%3E") no-repeat 100% 100%;
  }

  .copy {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M26.612 20.392v3.361s-.064 2.208-2.504 2.016l-2.85.014v9.303a.38.38 0 0 0 .38.384h10.71c.211 0 .38-.17.38-.384h.003V20.772a.38.38 0 0 0-.38-.38zm-4.53-7.537v4.079s-.075 2.678-3.033 2.447l-3.46.015V30.68c0 .255.21.463.47.463h3.666v-5.763l4.768-5.054h.013l1.397-1.467h3.603v-5.544a.461.461 0 0 0-.463-.461zM21.23 11h7.813a2.321 2.321 0 0 1 2.323 2.318v5.545h.98l.003-.002c1.053 0 1.911.856 1.911 1.912v14.313A1.914 1.914 0 0 1 32.35 37H21.638a1.914 1.914 0 0 1-1.912-1.914V33H16.06a2.32 2.32 0 0 1-2.321-2.32V18.906l5.779-6.124h.023z'/%3E%3C/svg%3E") no-repeat 100% 100%;
  }

  .paste {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='#000' d='M24.652 23.171v13.045l9.039-.016V25.67h-2.513v-2.499zm-.84-.78h7.368l3.326 3.28v11.313L23.812 37zm-10.318-8.845h2.463c-.005.033-.01.065-.01.097v1.217c0 .678.553 1.232 1.229 1.232h8.3c.68 0 1.23-.554 1.23-1.232v-1.217c0-.032-.008-.062-.01-.097h2.462v8.362H23.2v9.322h-9.706zm7.063-1.398v1.602h1.86v-1.602zM20.073 11h2.763c.37 0 .666.345.666.77v1.103h1.972a.77.77 0 0 1 .769.77v1.216c0 .425-.348.77-.77.77h-8.297a.77.77 0 0 1-.769-.77v-1.217a.77.77 0 0 1 .769-.77h2.228V11.77c0-.423.298-.769.67-.769z'/%3E%3C/svg%3E") no-repeat 100% 100%;
  }