Setting dimension in EJ2 JavaScript Tooltip control

10 Mar 20257 minutes to read

Height and Width

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

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

var tooltip = new ej.popups.Tooltip({
    width: '180px',
    height: '40px',
    content: 'This tooltip has 180px width and 40px height'
});
tooltip.appendTo('#target');

var button = new ej.buttons.Button({
    content: 'Show Tooltip'
});
button.appendTo('#target');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Tooltip</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div style="display: inline-block; position: relative; left: 50%;top: 100px;transform: translateX(-50%);">
            <span id="target">Show Tooltip</span>
        </div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
}

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

Scroll mode

When height is specified with a certain pixel value and the Tooltip content overflows, the scroll mode gets enabled.

var tooltipContent = document.createElement("div");
tooltipContent.id = 'tooltipContent';
tooltipContent.innerHTML = "<b>Environmentally friendly</b> or environment-friendly, (also referred to as eco-friendly, nature-friendly, and green) 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.";

var tooltip = new ej.popups.Tooltip({
    width: '300px',
    height: '60px',
    content: tooltipContent,
    isSticky: true
});
tooltip.appendTo('#target');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Tooltip</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        <p>A green home is a type of house designed to be
            <a id="target">
                <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>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <style>
        #tooltipContent {
            padding: 10px;
            font-weight: 400;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

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

The scroll mode can best be seen when the sticky mode of the Tooltip is enabled. To enable sticky mode, set the isSticky property to true.