Docs page examples

Author: alterebro

docs/index.html

@@ -37,19 +37,22 @@ <h2>Usage</h2>
         </p>
 
         <h2>Examples</h2>
-        <p>Lorem ipsum dolor sit amet. Sample <span data-tooltip="Tooltip is visible on this element">tooltip span here</span>, but not here... </p>
-        <blockquote>
-            <p>Lorem ipsum dolor sit amet ... <a href="" data-tooltip="Lorem ipsum dolor sit amet...">tootltip</a></p>
-        </blockquote>
-        <p>
-            ...  <a href="" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae augue maximus" class="tooltip-multiline tooltip-bottom">tootltip multiline, tooltip bottom</a>
-             / <a href="" data-tooltip="Lorem ipsum dolor sit amet..." class="tooltip-bottom-right">tootltip (bottom right)</a>
-            <br><a href="" data-tooltip="Lorem ipsum dolor sit amet..." class="tooltip-bottom-left">tootltip (bottom left)</a>
-        </p>
-        <ul>
-            <li><a href="" data-tooltip="Lorem ipsum dolor sit amet" class="tooltip-top">Tooltip top (default)</a></li>
-            <li><a href="" data-tooltip="Lorem ipsum dolor sit amet" class="tooltip-top-left">Tooltip top left</a> / ... / <a href="" data-tooltip="Lorem ipsum dolor sit amet" class="tooltip-top-right">Tooltip top right</a></li>
-        </ul>
+
+        <div class="examples">
+            <p>💬 Using tooltips on different elements, <span data-tooltip="Tooltip is visible on this element">span with a tooltip here</span>, but not here.</p>
+            <blockquote>
+                <p>Hyperlinks with tooltip: <a href="" data-tooltip="Lorem ipsum dolor sit amet...">standard style tooltip</a> (<code>data-tooltip="Lorem ipsum dolor sit amet..."</code>).</p>
+            </blockquote>
+            <p>
+                💬 <a href="" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae augue maximus" class="tooltip-multiline tooltip-bottom">a multiline tootltip multiline placed at the bottom</a> (<code>class="tooltip-multiline tooltip-bottom"</code>)
+                 / <a href="" data-tooltip="Lorem ipsum dolor sit amet..." class="tooltip-bottom-right">another element with tootltip on the bottom-right</a> (<code>class="tooltip-bottom-right"</code>)
+                and <br><a href="" data-tooltip="Lorem ipsum dolor sit amet..." class="tooltip-bottom-left">another one more (placed on bottom-left)</a> (<code>class="tooltip-bottom-left"</code>).
+            </p>
+            <ul>
+                <li><a href="" data-tooltip="Lorem ipsum dolor sit amet">Element with tooltip on top (default)</a></li>
+                <li><a href="" data-tooltip="Lorem ipsum dolor sit amet" class="tooltip-top-left">hyperlink with Tooltip on top left</a> and <a href="" data-tooltip="Lorem ipsum dolor sit amet" class="tooltip-top-right">another one with tooltip on top right</a> (<code>class="tooltip-top-left"</code>).</li>
+            </ul>
+        </div>
 
         <h2>More Info</h2>
         <ul>

docs/style.css

@@ -24,6 +24,9 @@ a {
     font-weight: 500;
     text-decoration: none;
 }
+a:hover {
+    color: #000;
+}
 img {
     display: block;
     max-width: 100%;
@@ -47,6 +50,13 @@ hr {
     border-bottom: solid #ddd 1px;
 }
 
+.examples {
+    border: dotted #bee 2px;
+    border-radius: 3px;
+    padding: .5rem 2rem;
+}
+
+
 [data-tooltip]{ border-bottom: solid #9ff 2px }
 [data-tooltip]:before {
     font-weight: 300;