diff options
Add Popovers docs
1 files changed, 19 insertions, 3 deletions
| -rw-r--r-- | docs/components.html | 22 |
diff --git a/docs/components.html b/docs/components.html index 4512945..565f1b9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1469,11 +1469,27 @@ </div> </div> <section class="notes"> - <p></p> + <p>Wrap an element by a container with the <code>popover</code> class. And add a container with the <code>popover-container</code> next to the element. You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>. </p> + <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position. By default, the popovers appear above the element.</p> </section> -<!-- steps example --> -<pre class="code" data-lang="HTML"><code> +<!-- popovers example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"popover popover-right"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>right popover<<span class="tag">/button</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"popover-container"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-header"</span>> + ... + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-body"</span>> + ... + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-footer"</span>> + ... + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> </code></pre> </section> |