Angular UI Components Documentation

Sets or gets the absolutePositionX property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [absolutePositionX]="20">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the absolutePositionY property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [absolutePositionY]="20">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoHide property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [autoHide]="false">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the autoHideDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [autoHideDelay]="100">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the animationShowDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [animationShowDelay]="2000">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the animationHideDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [animationHideDelay]="2000">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the content property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the closeOnClick property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [closeOnClick]="false">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [disabled]="true">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the enableBrowserBoundsDetection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [enableBrowserBoundsDetection]="true">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [height]="30">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the left property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [left]="100">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the name property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the opacity property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [opacity]="0.5">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

enum TooltipPosition {
     top,
     bottom,
     left,
     right,
     top-left,
     bottom-left,
     top-right,
     bottom-right,
     absolute,
     mouse,
     mouseenter,
     default
}

Sets or gets the position property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [rtl]="true">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showDelay property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [showDelay]="200">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the showArrow property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [showArrow]="false">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the top property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [top]="100">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

enum TooltipTrigger {
     hover,
     click
}

Sets or gets the trigger property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [trigger]="'click'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [theme]="'energyblue'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'" [width]="200">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the tooltip is closed (hidden).

Code examples

Bind to the close event of jqxTooltip.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip(onClose)="Close($event)"
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    Close(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the tooltip is closing.

Code examples

Bind to the closing event of jqxTooltip.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip(onClosing)="Closing($event)"
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    Closing(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the tooltip is opened (shown).

Code examples

Bind to the open event of jqxTooltip.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip(onOpen)="Open($event)"
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    Open(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the tooltip is opening.

Code examples

Bind to the opening event of jqxTooltip.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip(onOpening)="Opening($event)"
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent {
    Opening(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTooltip') myTooltip: jqxTooltipComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTooltip.close();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTooltip') myTooltip: jqxTooltipComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTooltip.destroy();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTooltip') myTooltip: jqxTooltipComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTooltip.open();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTooltip #myTooltip
            [position]="'mouse'" [name]="'movieTooltip'" [content]="'The Amazing Spider-man'">
            <img src='../images/The_Amazng_Spider_Man.jpeg' />
        </jqxTooltip>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTooltip') myTooltip: jqxTooltipComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTooltip.refresh();
    }

    
}