<h1>
    Popups with Owner Elements
</h1>
<p>
    Popups may have owner elements that control their position
    and visibility.
</p>
<p>
    The Popup's <b>showTrigger</b> and <b>hideTrigger</b> properties
    determine whether the Popups should be shown or hidden when the
    owner element is clicked or when the popup loses the focus.
</p>
<p>
    In Bootstrap CSS, Popups with owner elements are called "Popovers".
</p>

<h3>
    Show on Click, Hide on Blur
</h3>
<p>
    The most common type of Popover is the one with <b>showTrigger</b>
    set to 'Click' and <b>hideTrigger</b> set to 'Blur'.
</p>
<p>
    In this example, the owner element is a button. Click the button
    to show the Popover. Click anywhere outside the Popover to take
    the focus away and hide it:
</p>
<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>
@Html.C1().Popup("#popClickBlur").Owner("#btnClickBlur")

<h3>
    Show on Click, Hide on Click
</h3>
<p>
    If you set the <b>showTrigger</b> and <b>hideTrigger</b>
    to 'Click', the Popover will appear when you click the owner
    element and will remain visible until you click the owner
    element again:
</p>
<button id="btnClickClick" class="btn btn-primary">
    Show the Popover
</button>
<div id="popClickClick" 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 Boostrap's 'popover-content' style.
    </div>
</div>
@Html.C1().Popup("#popClickClick").Owner("#btnClickClick")

<h3>
    Show on Click, Hide with Code
</h3>
<p>
    If you set the <b>showTrigger</b> to 'Click' and
    <b>hideTrigger</b> to 'None', the Popover will appear
    when you click the owner element and will remain visible
    until you call the <b>hide</b> method in code or until the
    user presses the Escape key or clicks an element with the
    'wj-hide' class:
</p>
<button id="btnClickNone" class="btn btn-primary">
    Show the Popover
</button>
<div id="popClickNone" class="popover">
    <h3 class="popover-title">
        Title
    </h3>
    <div class="popover-content">
        <form name="popoverForm">
            <p>
                Hello Popup<br />
                This is a multi-line message!
            </p>
            <pre>2 + 3 = <span class="">5</span></pre>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon">@@</div>
                    <input class="form-control" type="email" placeholder="Enter email">
                </div>
            </div>
            <div class="form-actions">
                <button class="btn btn-danger wj-hide">Close</button>
                <button class="btn btn-primary wj-hide-ok">Save changes</button>
            </div>
        </form>
    </div>
</div>
@Html.C1().Popup("#popClickNone").Owner("#btnClickNone")