| Name | Type | Default |
|---|---|---|
| arrowOffsetValue | Number | 0 |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| animationOpenDelay | String | Number | 'fast' |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [animationOpenDelay]="100">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| animationCloseDelay | String | Number | 'fast' |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [animationCloseDelay]="50">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| autoClose | Boolean | true |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [autoClose]="true">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| animationType | enum:PopoverAnimationType | 'none' |
|
enum PopoverAnimationType {
none, fade } Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [animationType]="'fade'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| height | String | Number | null |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [height]="50">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| initContent | () => Void | null |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [initContent]="initContent">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| isModal | Boolean | false |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [isModal]="true">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| offset | Any | null |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [offset]="{left: 10, top: 10}">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| position | enum:PopoverPosition | 'left' |
|
enum PopoverPosition {
top, bottom, left, right } Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| rtl | Boolean | false |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [rtl]="true">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| selector | String | null |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [selector]="'$("#button")'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| showArrow | Boolean | true |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [showArrow]="true">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| showCloseButton | Boolean | false |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| width | String | Number | null |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [width]="200">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| title | String | Number | "" |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
| theme | String | '' |
|
Sets or gets the import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'" [theme]="'arctic'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
}
|
||
Events |
||
| close | Event | |
|
This event is triggered when the popover is closed. Code examples
Bind to the
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver(onClose)="Close($event)"
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
Close(event: any): void
{
// Do Something
}
|
||
| open | Event | |
|
This event is triggered when the popover is opened. Code examples
Bind to the
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver(onOpen)="Open($event)"
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent {
Open(event: any): void
{
// Do Something
}
|
||
Methods |
||
| Name | Return Type | Arguments |
| close | Void | None |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myPopover') myPopover: jqxPopoverComponent; |
||
| destroy | Void | None |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myPopover') myPopover: jqxPopoverComponent; |
||
| open | Void | None |
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxPopOver #myPopOver
[offset]="{ left: 0, top: -125 }" [arrowOffsetValue]="-240" [position]="'left'"
[title]="'Employees'" [showCloseButton]="true" [selector]="'#container'">
<div>
<table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/nancy.png"></td><td>Nancy Davolio</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/andrew.png"></td><td>Andrew Fuller</td></tr><tr><td>Vice President, Sales</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/janet.png"></td><td>Janet Leverling</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/margaret.png"></td><td>Margaret Peacock</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/steven.png"></td><td>Steven Buchanan</td></tr><tr><td>Sales Manager</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/michael.png"></td><td>Michael Suyama</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/robert.png"></td><td>Robert King</td></tr><tr><td>Sales Representative</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/laura.png"></td><td>Laura Callahan</td></tr><tr><td>Inside Sales Coordinator</td></tr></tbody></table><table style="min-width: 150px;"><tbody><tr><td style="width: 55px;" rowspan="2"><img height="50" width="45" src="~/images/anne.png"></td><td>Anne Dodsworth</td></tr><tr><td>Sales Representative</td></tr></tbody></table>
</div>
</jqxPopOver>
<div class="jqx-widget-header" style="height: 800px; width: 140px; float: right; margin-top: 30px; border-width: 1px; border-style: solid; padding: 10px;" id="container">
<jqxButton style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
[width]="140" [height]="35">
View Employees
</jqxButton>
</div>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myPopover') myPopover: jqxPopoverComponent; |
||