HelpBot Assistant

How can I help you?

Position in Angular Tooltip component

26 Feb 202616 minutes to read

Attach tooltips to 12 static locations around the target element. When initializing the Tooltip, set the position property to one of the following values:

  • TopLeft

  • TopCenter

  • TopRight

  • BottomLeft

  • BottomCenter

  • BottomRight

  • LeftTop

  • LeftCenter

  • LeftBottom

  • RightTop

  • RightCenter

  • RightBottom

By default, Tooltip is placed at the TopCenter of the target element.

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, ViewChild, ViewEncapsulation } from '@angular/core';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';
import { Position } from '@syncfusion/ej2-popups';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <div style='display: inline-flex;position:  relative;left:  50%;transform:  translateX(-50%);margin-top:  100px;'>
      <div>
        <ejs-tooltip #tooltip id='tooltip' content='Tooltip content' >
            <button ejs-button id="target">Show Tooltip</button>
        </ejs-tooltip>
    </div>
    <div>
         <select id="positions" (change)="onChange($event.target)" class="form-control">
             <option value="TopLeft">Top Left</option>
             <option value="TopCenter" selected>Top Center</option>
             <option value="TopRight">Top Right</option>
             <option value="BottomLeft">Bottom Left</option>
             <option value="BottomCenter">Bottom Center</option>
             <option value="BottomRight">Bottom Right</option>
             <option value="LeftTop">Left Top</option>
             <option value="LeftCenter">Left Center</option>
             <option value="LeftBottom">Left Bottom</option>
             <option value="RightTop">Right Top</option>
             <option value="RightCenter">Right Center</option>
             <option value="RightBottom">Right Bottom</option>
        </select>
    </div>
    </div>
    `,
    styles: [
        `
    #tooltip {
        padding: 5px;
        margin-right: 20px;
    }
    `,
    ],
    encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
    @ViewChild('tooltip') public control: TooltipComponent | any;

    onChange(target: string | any) {
        this.control.position = target.value as Position;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Tip pointer positioning

Attach or detach the tooltip pointer using the showTipPointer property. Adjust pointer positions using the tipPointerPosition property, which accepts one of the following values:

  • Auto

  • Start

  • Middle

  • End

The following code example demonstrates how to set the pointer to the start position.

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 } from '@angular/core';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
        <ejs-tooltip id="tooltip" content='Tooltip content' tipPointerPosition='Start'>
            <button ejs-button>Show tooltip</button>
        </ejs-tooltip>
        `,
    styles: [`
        #tooltip {
           display: block;
            margin: 80px auto;
            width: 200px;
            text-align: center;
            color: #424242;
            font-size: 20px;
        }
    `]
})

export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

By default, tip pointers are auto adjusted so that the arrow does not point outside the target element.

Dynamic positioning

Position the tooltip and its tip pointer dynamically based on the target element. Use the refresh method to automatically adjust the tooltip position relative to the target.

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, ViewChild, Inject } from '@angular/core';
import { TooltipComponent } from '@syncfusion/ej2-angular-popups';
import { Draggable } from '@syncfusion/ej2-base';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <ejs-tooltip #tooltip id='targetContainer' content='Drag me !!!' target='#demoSmart' [animation]='tooltipAnimation'>
        <div id="demoSmart">
        </div>
    </ejs-tooltip>
    `,
    styles: [`
    #targetContainer {
        position: relative;
        height: 360px;
        overflow: hidden;
        border: 1px solid #c8c8c8;
        display: block;
    }

    #demoSmart {
        width: 50px;
        height: 50px;
        background: rebeccapurple;
        position: absolute;
        left: 35%;
        top: 35%;
    }
    `]
})

export class AppComponent {
    @ViewChild('tooltip')
    public tooltipControl: TooltipComponent | any;
    public tooltipAnimation: Object = {
        open: { effect: 'None' },
        close: { effect: 'None' }
    };

    ngOnInit(): void {
        let ele: HTMLElement = document.getElementById('demoSmart') as HTMLElement;
        let drag: Draggable = new Draggable(ele, {
            clone: false,
            dragArea: '#targetContainer',
            drag: (args: any) => {
                this.tooltipControl.refresh(args.element);
            },
            dragStart: (args: any) => {
                this.tooltipControl.open(args.element);
            },
            dragStop: (args: any) => {
                this.tooltipControl.close();
            }
        });
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Mouse trailing

Position tooltips relative to the mouse pointer by enabling this feature. Enable or disable this behavior using the mouseTrail property. By default, it is set to false.

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 } from '@angular/core';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
        <ejs-tooltip id="tooltip" content='Tooltip content' [mouseTrail]='true'>
            <span>Show tooltip</span>
        </ejs-tooltip>
        `,
    styles: [`
        #tooltip {
            display: block;
            background-color: #cfd8dc;
            border: 3px solid #eceff1;
            box-sizing: border-box;
            margin: 80px auto;
            padding: 20px 0;
            width: 200px;
            text-align: center;
            color: #424242;
            font-size: 20px;
        }
    `]
})

export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

When mouse trailing option is enabled, the tip pointer position gets auto adjusted based on the target, and other position values like start, end, and middle are not applied (to prevent the pointer from moving out of target).

Setting offset values

Use offset values to specify the distance between the target and tooltip element. The offsetX and offsetY properties set the horizontal and vertical offset values.

  • offsetX specifies the horizontal distance between the target and tooltip element.
  • offsetY specifies the vertical distance between the target and tooltip element.

The following code example demonstrates how to set offset values.

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 } from '@angular/core';

@Component({
    imports: [
        TooltipModule,
        ButtonModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
        <ejs-tooltip id="tooltip" content='Tooltip content' [offsetX]='30' [offsetY]='30' [mouseTrail]='true' [showTipPointer]='false'>
            <span>Show tooltip</span>
        </ejs-tooltip>
        `,
    styles: [`
        #tooltip {
            display: block;
            background-color: #cfd8dc;
            border: 3px solid #eceff1;
            box-sizing: border-box;
            margin: 80px auto;
            padding: 20px 0;
            width: 200px;
            text-align: center;
            color: #424242;
            font-size: 20px;
        }
    `]
})

export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

By default, collision is handled automatically and therefore when collision is detected the Tooltip fits horizontally and flips vertically.