# UserPopup

`UserPopup`s are used to display a popup relative to a target control.

{% hint style="success" %}
Show the popup by calling the `ShowPopup` method with a target control.
{% endhint %}

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Alignment

The `UserPopup` can be shown anywhere in relation to the popup's target control.

* `TopLeft`: The popup is shown above the opener aligned to the left edge.
* `TopCenter`: The popup is shown above the opener and horizontally centered.
* `TopRight`: The popup is shown above the opener aligned to the right edge.
* `BottomLeft`: The popup is shown below the opener aligned to the left edge.
* `BottomCenter`: The popup is shown below the opener and horizontally centered.

![Popup Alignment - Top and Bottom](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-a3b74c79fd652db4c0241988dd4d0a16ad26e6ae%2Fimage.png?alt=media)

* `BottomRight`: The popup is shown below the opener aligned to the right edge.
* `LeftTop`: The popup is shown to the left of the opener aligned to the top edge.
* `LeftMiddle`: The popup is shown to the left of the opener and vertically centered.

![Popup Alignment - Left Side](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-46b76e7f2905baeed922175a75a7cee996905417%2Fimage.png?alt=media)

* `LeftBottom`: The popup is shown to the left of the opener aligned to the bottom edge.
* `RightTop`: The popup is shown to the right of the opener aligned to the top edge.

![Popup Alignment - Right Side](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-44928dc48f21589617eaa8c9bade6f7dd050e6eb%2Fimage.png?alt=media)

* `RightMiddle`: The popup is shown to the right of the opener and vertically centered.
* `RightBottom`: The popup is shown to the right of the opener aligned to the bottom edge.

### Full Customization

The `UserPopup` is fully customizable. Any kind of control can be added to the container.

![UserPopup Customization Example](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-a0b1d3e47d899c3bdfbe5411a522eac10525fcdd%2Fimage.png?alt=media)

## Advanced

### JavaScript Widget <a href="#javascript-widget" id="javascript-widget"></a>

| Item             | Description                                                                                                         |
| ---------------- | ------------------------------------------------------------------------------------------------------------------- |
| Class name       | "wisej.web.UserPopup"                                                                                               |
| Theme appearance | "userpopup", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                            |
| Child components | "pane" is the container. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model).            |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js) |