Setting dimension in Angular Tooltip

14 Aug 20264 minutes to read

Height and width

Set the tooltip to auto or specific pixel values for height and width. The width and height properties set the outer dimensions of the tooltip element. Both properties default to auto and accept string and number values in pixels.

The following sample demonstrates setting tooltip dimensions.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <div id='container' style="display: inline-block; position: relative; left: 50%;top: 100px;transform: translateX(-50%);">
        <ejs-tooltip id='tooltip' content="This tooltip has 180px width and 40px height" width='180px' height='40px' target="#target" >
            <button ejs-button id="target">Show Tooltip</button>
        </ejs-tooltip>
    </div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Scroll mode

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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, ViewEncapsulation } from '@angular/core';

@Component({
imports: [
        
        TooltipModule,
        ButtonModule
    ],


standalone: true,
    selector: 'my-app',
    template: `
        <p>A green home is a type of house designed to be
            <ejs-tooltip id='tooltip' width='300px' height='60px' isSticky='true' [content]='tooltipContent'>
            <a><u>environmentally friendly</u></a>
            </ejs-tooltip> 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>
        `,
    encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
    tooltipContent: HTMLElement = document.createElement('div');
    constructor() {
        (this as any).tooltipContent =
            '<div id="tooltipContent"><p><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.</p></div>';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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