docs: update api docs

AlaskaAirlines · Aug 18, 2020 · 2dba5b7 · 2dba5b7
1 parent 9b6581e
commit 2dba5b7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -31,14 +31,23 @@ <h1>auro-popover</h1>
       <demo-snippet>
         <template>
             <button id="button1">Popover bottom</button>
-            <auro-popover for="button1" placement="bottom">Hello World!</auro-popover>
+            <auro-popover for="button1">Hello World!</auro-popover>
+
+            <button id="button10">Popover bottom</button>
+            <auro-popover for="button10" placement="top">Hello World!</auro-popover>
+
+
         </template>
       </demo-snippet>
 
       <demo-snippet>
         <template>
-            <button id="button2">Popover top</button>
-            <auro-popover placement="top" for="button2">Hello World!</auro-popover>
+          <auro-popover placement="top" for="button2">Hello World!</auro-popover>
+          <button id="button2">Popover top</button>
+
+          <auro-popover for="button3" placement="bottom">Hello World!</auro-popover>
+          <button id="button3">Popover bottom</button>
+
         </template>
       </demo-snippet>
 
@@ -51,8 +60,8 @@ <h1>auro-popover</h1>
 
       <demo-snippet>
         <template>
-            <p id="button3">Hover over me, and I will pop up</p>
-            <auro-popover placement="top" for="button3">
+            <p id="button5">Hover over me, and I will pop up</p>
+            <auro-popover placement="top" for="button5">
               I am the content in the tooltip ... listen to me.
             </auro-popover>
         </template>

diff --git a/docs/api.md b/docs/api.md
@@ -4,10 +4,10 @@ Popover attaches to an element and displays on hover/blur.
 
 ## Properties
 
-| Property    | Attribute   | Type     | Description                                      |
-|-------------|-------------|----------|--------------------------------------------------|
-| `for`       | `for`       | `String` | Defines an id for an element in the DOM to trigger on hover/blur. |
-| `placement` | `placement` | `String` | Expects top/bottom - default position for popover in relation to the element. |
+| Property    | Attribute   | Type     | Default | Description                                      |
+|-------------|-------------|----------|---------|--------------------------------------------------|
+| `for`       | `for`       | `String` |         | Defines an `id` for an element in the DOM to trigger on hover/blur. |
+| `placement` | `placement` | `String` | "top"   | Expects top/bottom - position for popover in relation to the element. |
 
 ## Methods
 

diff --git a/src/auro-popover.js b/src/auro-popover.js
@@ -14,10 +14,15 @@ import Popover from "./popover";
 /**
  * Popover attaches to an element and displays on hover/blur.
  *
- * @attr {String} placement - Expects top/bottom - default position for popover in relation to the element.
- * @attr {String} for - Defines an id for an element in the DOM to trigger on hover/blur.
+ * @attr {String} placement - Expects top/bottom - position for popover in relation to the element.
+ * @attr {String} for - Defines an `id` for an element in the DOM to trigger on hover/blur.
  */
 class AuroPopover extends LitElement {
+  constructor() {
+    super();
+    this.placement = 'top';
+  }
+
   // function to define props used within the scope of this component
   static get properties() {
     return {