# PopUp With Owner Elements

Learn how to attach a Wijmo Popup to an owner element in this tutorial

## Content


Popups may have owner elements that control their position and visibility.
The __showTrigger__ and __hideTrigger__ properties of the __Popup__ control determine whether the Popup should be shown or hidden when the owner element is clicked or when the popup loses the focus.

In Bootstrap CSS, Popups with owner elements are called "Popovers". The most common type of Popover is the one with __showTrigger__ set to 'Click' and __hideTrigger__ set to 'Blur'.

Example:  The owner element is a button. Clicking the button will  show the Popover. Clicking anywhere outside the Popover to take the focus away and it will hide the popup:

![PopUp](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/input/popup-owner.gif)

##### HTML

```html
  <button id="btnClickBlur" class="btn btn-primary">
    Show the Popover
  </button>
  <div id="popClickBlur" class="popover">
    <h3 class="popover-title">
      Title
    </h3>
    <div class="popover-content">
      Hello Popup<br/>
      This is a multi-line message!
      This is a long line in my popover, which uses Bootstrap's
      'popover-content' style.
    </div>
  </div>
```

##### Javascript

```javascript
import * as input from '@mescius/wijmo.input';

function init() {
    let popClickBlur = new input.Popup('#popClickBlur', {
        owner: document.getElementById('btnClickBlur'),
        showTrigger: 'Click',
        hideTrigger: 'Blur'
    });
}
```