Setting dimension in React Tooltip component

28 Jan 202510 minutes to read

Height and width

The Tooltip can either be assigned auto height and width values or specific pixel values. The width and height properties are used to set the outer dimension of the Tooltip element. The default value for both the properties is auto. It also accepts string and number values in pixels.

The following sample explains how to set dimensions for the Tooltip.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
  return (<TooltipComponent width="180px" height="40px" content="This Tooltip has 180px width and 40px height">
    <div id='target'>Show Tooltip</div>
  </TooltipComponent>);
}
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() {
  return (
    <TooltipComponent width="180px" height="40px" content="This Tooltip has 180px width and 40px height">
      <div id='target'>Show Tooltip</div>
    </TooltipComponent>
  );
}
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%;
}

#target {
    background-color: #cfd8dc;
    border: 3px solid #eceff1;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 100px;
    padding: 20px 0;
    width: 200px;
    text-align: center;
    color: #424242;
    font-size: 20px;
}
<!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="https://cdn.syncfusion.com/ej2/28.2.3/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>
<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>

Scroll mode

When a specific pixel value is set for the height property and the Tooltip content exceeds this height, the scrolling mode is enabled.

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 (<p>A green home is a type of house designed to be
        <TooltipComponent width="300px" height="60px" 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.
    </p>);
}
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 (
    <TooltipComponent width="300px" height="60px" isSticky={true} content={content} style={style}>
      <p>A green home is a type of house designed to be
        <a><u>environmentally friendly</u></a>
        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>
    </TooltipComponent>
  );
}
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 {
    padding: 10px;
    font-weight: 400;
}
<!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="https://cdn.syncfusion.com/ej2/28.2.3/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>
<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>

The scrolling mode is best observed when the Tooltip’s sticky mode is enabled. To enable this, set the isSticky property to true.