Content in React Tooltip component

28 Jan 202517 minutes to read

The text or information assigned to the Tooltip’s content property will be displayed as the main content of the Tooltip.
This content can be either a string or a template. If the content property is not provided with any specific value, then it takes the value assigned to the title attribute of the target element on which the Tooltip was initialized. The content can also dynamically be assigned to the Tooltip via Fetch.

Template content

Any text or image can be added to the Tooltip, by default. To customize the Tooltip layout or create your own visualized element within the Tooltip, you can use a template.

Refer to the following code example to add formatted HTML content to the Tooltip.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
    function content() {
        return (<span id='tooltipContent'>
            <p><strong>Environmentally friendly</strong> or <strong>environment-friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly, and green)</i> are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</p></span>);
    }
    let style = {
        display: 'inline-block',
        padding: '5px'
    };
    return (<div>A green home is a type of house designed to be
        <TooltipComponent isSticky={true} content={content} style={style}>
            <a><u>environmentally friendly</u></a>
        </TooltipComponent> and sustainable. And also focuses on the efficient use of "energy, water, and building materials." As green homes
        have become more prevalent we have also seen the emergence of green affordable housing.
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

function App() {
  function content() {
    return (
      <span id='tooltipContent'>
        <p><strong>Environmentally friendly</strong> or <strong>environment-friendly</strong>, <i>(also referred to as eco-friendly, nature-friendly, and green)</i> are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</p></span>
    )
  }
  let style: object = {
    display: 'inline-block',
    padding: '5px'
  };
  return (
    <div>A green home is a type of house designed to be
      <TooltipComponent isSticky={true} content={content} style={style}>
        <a><u>environmentally friendly</u></a>
      </TooltipComponent> and sustainable. And also focuses on the efficient use of "energy, water, and building materials." As green homes
      have become more prevalent we have also seen the emergence of green affordable housing.
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
#container {
    visibility: hidden;
}

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

#tooltipContent {
    font-size: 14px;
    padding: 0px 5px;
    font-weight: 400;
    line-height: 1.5;
}
<!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="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-buttons/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Dynamic content via Fetch

The Tooltip content can be dynamically loaded using a Fetch call. The Fetch request is usually made within the beforeRender event of the Tooltip, and then the Tooltip’s content is assigned the value retrieved on its success.

NOTE

The Tooltip target property includes a unique identifier used to associate Tooltips with specific elements on a webpage or application interface. When setting the Tooltip target value as a GUID (Globally Unique Identifier), it’s important to note that the GUID must start with a combination of letters before the numeric portion of the GUID. For example, target: ‘#’ + ‘ tooltip’+ ‘96ad88bd-294c-47c3-999b-a9daa3285a05’.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { Fetch } from '@syncfusion/ej2-base';
function App() {
  let tooltipInstance;
  function onBeforeRender(args) {
    tooltipInstance.content = 'Loading...';
    tooltipInstance.dataBind();
    let fetchApi = new Fetch('https://ej2.syncfusion.com/vue/demos/source/tooltip/tooltipdata.json', 'GET');
    fetchApi.send().then((result) => {
      for (let i = 0; i < result.length; i++) {
        if (result[i].Id === args.target.getAttribute('data-content')) {
          tooltipInstance.content = "<div class='contentWrap'>" + result[i].Sports + "</div>";
        }
      }
      tooltipInstance.dataBind();
    }, (reason) => {
      tooltipInstance.content = reason.message;
      tooltipInstance.dataBind();
    });
  }
  return (<div id="container">
    <h4>National Sports</h4>
    <TooltipComponent id="targetContainer" ref={t => tooltipInstance = t} className="e-prevent-select" content="Loading..." target=".target" position="RightCenter" beforeRender={onBeforeRender.bind(this)}>
      <div id="countrylist">
        <ul>
          <li className="target" title="1"><span>Australia</span></li>
          <li className="target" title="2"><span>Bhutan</span></li>
          <li className="target" title="3"><span>China</span></li>
          <li className="target" title="4"><span>Cuba</span></li>
          <li className="target" title="5"><span>India</span></li>
          <li className="target" title="6"><span>Switzerland</span></li>
          <li className="target" title="7"><span>United States</span></li>
        </ul>
      </div>
    </TooltipComponent>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-popups';
import { Fetch } from '@syncfusion/ej2-base';

function App() {
  let tooltipInstance: TooltipComponent;
  function onBeforeRender(args: TooltipEventArgs): void {
    tooltipInstance.content = 'Loading...';
    tooltipInstance.dataBind();
    let fetchApi: Fetch = new Fetch('https://ej2.syncfusion.com/vue/demos/source/tooltip/tooltipdata.json', 'GET');
    fetchApi.send().then(
      (result: any) => {
        for (let i: number = 0; i < result.length; i++) {
          if (result[i].Id === args.target.getAttribute('data-content')) {
            tooltipInstance.content = "<div class='contentWrap'>" + result[i].Sports + "</div>";
          }
        }
        tooltipInstance.dataBind();
      },
      (reason: any) => {
        tooltipInstance.content = reason.message;
        tooltipInstance.dataBind();
      });
  }
  return (
    <div id="container">
      <h4>National Sports</h4>
      <TooltipComponent id="targetContainer" ref={t => tooltipInstance = t} className="e-prevent-select" content="Loading..." target=".target" position="RightCenter" beforeRender={onBeforeRender.bind(this)}>
        <div id="countrylist">
          <ul>
            <li className="target" title="1"><span>Australia</span></li>
            <li className="target" title="2"><span>Bhutan</span></li>
            <li className="target" title="3"><span>China</span></li>
            <li className="target" title="4"><span>Cuba</span></li>
            <li className="target" title="5"><span>India</span></li>
            <li className="target" title="6"><span>Switzerland</span></li>
            <li className="target" title="7"><span>United States</span></li>
          </ul>
        </div>
      </TooltipComponent>
    </div>
  );
}
export default App;
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="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-popups/styles/material.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>
    <style>
        #container {
            width: 350px;
            position: relative;
            left: 50%;
            transform: translateX(-25%);
        }

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

        #countrylist {
            padding: 5px;
        }

        #countrylist ul {
            border: 1px solid #c4c4c4;
            box-sizing: border-box;
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100px;
        }

        #countrylist li {
            padding: 10px;
        }

        #countrylist li:hover {
            background-color: #ececec;
        }

        .contentWrap {
            line-height: 16px;
            padding: 3px 0;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>