Content in React Tooltip component

28 Jul 2021 / 3 minutes to read

A text or a piece of information assigned to the Tooltip’s content property will be displayed as the main text stream of the Tooltip. It can be a string or a template content. 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 AJAX.

Template content

Any text or image can be added to the Tooltip, by default. To customize the Tooltip layout or to create your own visualized element on the Tooltip, template can be used.

Refer to the following code example to add formatted HTML content to the 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';

class App extends React.Component<{}, {}> {
  private content() {
    return(
      <div 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></div>
    )
  }
  render() {
    let style: object = {
      display: 'inline-block',
      padding : '5px'
    };
    return (
        <p>A green home is a type of house designed to be
            <TooltipComponent width="300px" height="60px" isSticky={true} content={this.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.
        </p>
    );
  }
}
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="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 {
    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;
}

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component {
    content() {
        return (<div 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></div>);
    }
    render() {
        let style = {
            display: 'inline-block',
            padding: '5px'
        };
        return (<p>A green home is a type of house designed to be
            <TooltipComponent width="300px" height="60px" isSticky={true} content={this.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.
        </p>);
    }
}
ReactDom.render(<App />, document.getElementById('sample'));

Dynamic content via AJAX

The Tooltip content can be dynamically loaded by making use of the AJAX call. The AJAX request is usually made within the beforeRender event of the Tooltip, and then the Tooltip’s content is assigned the value retrieved on it’s success.

Source

Preview

index.tsx

index.html

tooltipdata.json

index.jsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-popups';
import { Ajax } from '@syncfusion/ej2-base';

class App extends React.Component<{}, {}> {
  private tooltipInstance: TooltipComponent;
  public onBeforeRender(args: TooltipEventArgs): void {
    this.tooltipInstance.content = 'Loading...';
    this.tooltipInstance.dataBind();
    let ajax: Ajax = new Ajax('./tooltipdata.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.getAttribute('data-content')) {
            this.tooltipInstance.content = "<div class='contentWrap'>" + result[i].Sports + "</div>";
          }
        }
        this.tooltipInstance.dataBind();
      },
      (reason: any) => {
        this.tooltipInstance.content = reason.message;
        this.tooltipInstance.dataBind();
      });
  }
  render() {
    return (
      <div id="container">
        <h4>National Sports</h4>
        <TooltipComponent id="targetContainer" ref={t => this.tooltipInstance = t} className="e-prevent-select" content="Loading..." target=".target" position="RightCenter" beforeRender={this.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>
    );
  }
}
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="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>
</head>

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

</html>

[
    {
        "Id": "1",
        "Country": "Australia",
        "Sports": "Cricket"
    },
    {
        "Id": "2",
        "Country": "Bhutan",
        "Sports": "Archery"
    },
    {
        "Id": "3",
        "Country": "China",
        "Sports": "Table tennis"
    },
    {
        "Id": "4",
        "Country": "Cuba",
        "Sports": "Baseball"
    },
    {
        "Id": "5",
        "Country": "India",
        "Sports": "Hockey"
    },
    {
        "Id": "6",
        "Country": "Switzerland",
        "Sports": "Shooting"
    },
    {
        "Id": "7",
        "Country": "United States",
        "Sports": "Baseball"
    }
]

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 {
    onBeforeRender(args) {
        this.tooltipInstance.content = 'Loading...';
        this.tooltipInstance.dataBind();
        let ajax = new Ajax('./tooltipdata.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.getAttribute('data-content')) {
                    this.tooltipInstance.content = "<div class='contentWrap'>" + result[i].Sports + "</div>";
                }
            }
            this.tooltipInstance.dataBind();
        }, (reason) => {
            this.tooltipInstance.content = reason.message;
            this.tooltipInstance.dataBind();
        });
    }
    render() {
        return (<div id="container">
        <h4>National Sports</h4>
        <TooltipComponent id="targetContainer" ref={t => this.tooltipInstance = t} className="e-prevent-select" content="Loading..." target=".target" position="RightCenter" beforeRender={this.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>);
    }
}
ReactDom.render(<App />, document.getElementById('sample'));

Contents

Template content
Dynamic content via AJAX

Contents

Template content
Dynamic content via AJAX

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!