From 9916574e339561d71c77dfa976e65b6c51b55abb Mon Sep 17 00:00:00 2001
From: Kevin <i@mkev.in>
Date: Tue, 21 Jun 2022 17:26:12 +0800
Subject: [PATCH] docs: add tooltips examples

---
 docs/scss/pico.docs.scss           |  3 +++
 docs/scss/utilities/_tooltips.scss | 19 +++++++++++++++++++
 docs/src/tooltips.html             | 15 ++++++++++++++-
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 docs/scss/utilities/_tooltips.scss

diff --git a/docs/scss/pico.docs.scss b/docs/scss/pico.docs.scss
index d4c17f01..d0c2b17a 100644
--- a/docs/scss/pico.docs.scss
+++ b/docs/scss/pico.docs.scss
@@ -22,3 +22,6 @@
 @import "components/modal";
 @import "components/nav";
 @import "components/theme-switcher";
+
+// Utilities
+@import "utilities/tooltips";
\ No newline at end of file
diff --git a/docs/scss/utilities/_tooltips.scss b/docs/scss/utilities/_tooltips.scss
new file mode 100644
index 00000000..1bc55749
--- /dev/null
+++ b/docs/scss/utilities/_tooltips.scss
@@ -0,0 +1,19 @@
+/**
+ * Docs: Tooltips
+ */
+
+.tooltip-placement {
+  display: grid;
+  grid-template-columns: 100px 1fr 100px;
+  .top, .bottom{
+    grid-column-start: 2;
+    grid-column-end: 3;
+  }
+  .left{
+    grid-column-start: 1;
+    grid-column-end: 2;
+  }
+  .right{
+    grid-column-start: 3;
+  }
+}
diff --git a/docs/src/tooltips.html b/docs/src/tooltips.html
index f239ba5b..74341180 100644
--- a/docs/src/tooltips.html
+++ b/docs/src/tooltips.html
@@ -24,11 +24,24 @@
             <p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
             <p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
             <p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
+            <p>Tooltip with <code>data-placement</code></p>
+            <div class="tooltip-placement">
+                <div class="top"><button data-tooltip="Top" data-placement="top" aria-label="Top tooltip">Top tooltip</button></div>
+                <div class="left"><button data-tooltip="Left" data-placement="left" aria-label="Left tooltip">Left tooltip</button></div>
+                <div class="right"><button data-tooltip="Right" data-placement="right" aria-label="Right tooltip">Right tooltip</button></div>
+                <div class="bottom"><button data-tooltip="Bottom" data-placement="bottom" aria-label="Bottom tooltip">Bottom tooltip</button></div>
+            </div>
             <footer class="code">
 
 <pre><code>&lt;<b>p</b>&gt;Tooltip on a &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;link&lt;/<b>a</b>&gt;&lt;/<b>p</b>&gt;
 &lt;<b>p</b>&gt;Tooltip on &lt;<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;inline element&lt;/<b>em</b>&gt;&lt;/<b>p</b>&gt;
-&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;</code></pre>
+&lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;
+<em>&lt;-- Placement --&gt;</em>
+&lt;<b>div</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Top"</u> <i>data-placement</i>=<u>"top"</u>&gt;Top tooltip&lt;/<b>button</b>&gt;&lt;/<b>div</b>&gt;
+&lt;<b>div</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Left"</u> <i>data-placement</i>=<u>"left"</u>&gt;Left tooltip&lt;/<b>button</b>&gt;&lt;/<b>div</b>&gt;
+&lt;<b>div</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Right"</u> <i>data-placement</i>=<u>"right"</u>&gt;Right tooltip&lt;/<b>button</b>&gt;&lt;/<b>div</b>&gt;
+&lt;<b>div</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Bottom"</u> <i>data-placement</i>=<u>"bottom"</u>&gt;Bottom tooltip&lt;/<b>button</b>&gt;&lt;/<b>div</b>&gt;
+</code></pre>
 
             </footer>
           </article>