Properties

NameTypeDefault
absolutePositionX Number 0

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 {
}
absolutePositionY Number 0

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 {
}
autoHide Boolean true

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 {
}
autoHideDelay Number 3000

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 {
}
animationShowDelay String | Number 'fast'

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 {
}
animationHideDelay String | Number 'fast'

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 {
}
content String ''

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 {
}
closeOnClick Boolean true

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 {
}
disabled Boolean false

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 {
}
enableBrowserBoundsDetection Boolean true

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 {
}
height String | Number 'auto'

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 {
}
left Number 0

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 {
}
name String ''

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 {
}
opacity Number 0.9

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 {
}
position enum:TooltipPosition 'default'
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 {
}
rtl Boolean false

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 {
}
showDelay Number 100

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 {
}
showArrow Boolean true

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 {
}
top String | Number 0

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 {
}
trigger enum:TooltipTrigger 'hover'
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 {
}
theme String ''

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 {
}
width String | Number 'auto'

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 {
}

Events

close Event

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
}

}

closing Event

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
}

}

open Event

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
}

}

opening Event

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
}

}

Methods

NameReturn TypeArguments
close Void index: Number
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();
}

}

destroy Void None
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();
}

}

open Void None
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();
}

}

refresh Void None
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();
}

}