---
layout: docs
title: Popover
edit_url: "https://github.com/nylas/N1/blob/master/src/components/popover.cjsx"
---

<h2>Summary</h2>

<div class="markdown-from-sourecode">
  <p><p>The Popover component makes it easy to display a sheet or popup menu when the
user clicks the React element provided as <code>buttonComponent</code>. In N1, the Popover
component is used to create rich dropdown menus, detail popups, etc. with consistent
look and feel and behavior.</p>
<p>The Popover component handles:</p>
<ul>
<li>Rendering it&#39;s children when you click <code>buttonComponent</code>, and dismissing it&#39;s
children when you click outside the popover or press the Escape key.</li>
<li>Automatically focusing the item with the lowest tabIndex inside the popover</li>
</ul>
<h2 id="input-focus">Input Focus</h2>
<p>If your Popover contains an input, like a search bar, give it a tabIndex and
Popover will automatically focus it when the popover is opened.</p>
<h2 id="advanced-use">Advanced Use</h2>
<p>If you don&#39;t want to use the Popover in conjunction with a triggering button,
you can manually call <code>open()</code> and <code>close()</code> to display it. A typical scenario
looks like this:</p>
<pre><code class="lang-coffeescript">render: =&gt;
  &lt;<span class="hljs-type">Popover</span> <span class="hljs-keyword">ref</span>=<span class="hljs-string">"myPopover"</span>&gt; <span class="hljs-type">Popover</span> <span class="hljs-type">Contents</span> &lt;/<span class="hljs-type">Popover</span>&gt;

showMyPopover: =&gt;
  @refs.myPopover.open()
</code></pre>
</p>
</div>

<ul>
</ul>