# wjPopup Class

## Content

<div class="content__tsd">
						<div style="display:flex;justify-content:space-between;align-items:center">
							<h1>
								wjPopup Class
							</h1>
						</div>
						<section class="tsd-comment">
							<div class="tsd-comment">
								<div class="lead">
									<p>KnockoutJS binding for the <a href="wijmo_input.popup.html">Popup</a> control.</p>
								</div>
								<p>Use the <a href="wijmo_knockout_input.wjpopup.html">wjPopup</a> binding to add <a href="wijmo_input.popup.html">Popup</a> controls to your
								KnockoutJS applications. For example:</p>
								<pre>&lt;p&gt;Here is a Popup control triggered by a button:&lt;/p&gt;
&lt;button id="btn2" type="button"&gt;
    Click to show Popup
&lt;/button&gt;
 &lt;div class="popover" data-bind="wjPopup: {
      control: popup,
      owner: '#btn2',
      showTrigger: 'Click',
      hideTrigger: 'Click'}"
 &gt;
    &lt;h3&gt;
         Salutation
    &lt;/h3&gt;
     &lt;div class="popover-content"&gt;
             Hello {​{firstName}} {​{lastName}}
     &lt;/div&gt;
&lt;/div&gt;</pre>
							</div>
						</section>
						<section class="tsd-hierarchy">
							<h3>Heirarchy</h3>
							<ul class="tsd-hierarchy">
								<li>
									<span class="tsd-signature-type">WjBinding</span>
									<ul class="tsd-hierarchy">
										<li>
											<span class="target">wjPopup</span>
										</li>
									</ul>
								</li>
							</ul>
						</section>
					</div>