update tooltips code and examples

4 files changed, 52 insertions, 15 deletions

diff --git a/demo/index.html b/demo/index.html
index 8e501af..426e943 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -22,7 +22,7 @@
             <header class="text-center"><h3>Project Spectre</h3></header>
             <header class="text-center"><h4>introduction</h4></header>
             <section>
-                <p><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p>
+                <p><a href="https://github.com/picturepan2/spectre" target="_blank">Project Spectre</a> is a lightweight and clean CSS framework for faster and extendable development.</p>
                 <ul>
                     <li>lightweight and clean starting point for your project</li>
                     <li>flexbox and responsive layout friendly</li>
@@ -499,20 +499,21 @@
         <section id="tooltips">
             <header class="text-center"><h4>tooltips</h4></header>
             <section>
-                <p><strong>tooltips.less</strong> is built entirely in CSS. </p>
+                <p><strong>tooltips.less</strong> is built entirely in CSS. Add the attribute <span class="highlight">data-tooltip</span> and class <span class="highlight">tooltip</span> to non self closing elements. And add the class name <span class="highlight">tooltip-right, tooltip-bottom or tooltip-left</span> to define the position of a tooltip. By default, the tooltip appears above the element.</p>
+                <code>&lt;button class=&quot;btn btn-primary tooltip tooltip-right&quot; data-tooltip=&quot;Lorem ipsum dolor sit amet&quot;&gt;right tooltip&lt;/button&gt;</code>
             </section>
             <div class="columns">
                 <div class="column">
-                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." data-tooltip-pos="top">top tooltip</button>
+                    <button class="btn btn-primary tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." data-tooltip-pos="top">top tooltip</button>
                 </div>
                 <div class="column">
-                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="right">right tooltip</button>
+                    <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
                 </div>
                 <div class="column">
-                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="bottom">bottom tooltip</button>
+                    <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum dolor sit amet">bottom tooltip</button>
                 </div>
                 <div class="column">
-                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="left">left tooltip</button>
+                    <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum dolor sit amet">left tooltip</button>
                 </div>
             </div>
         </section>
diff --git a/dist/spectre.css b/dist/spectre.css
index da78888..b7002db 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -455,6 +455,24 @@ blockquote p:last-child {
 blockquote small {
   color: #b3b3b3;
 }
+code,
+pre {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border-left: .2rem solid #ddd;
+  line-height: 1.8rem;
+  background-color: #efefef;
+}
+code {
+  padding: 1rem 2rem;
+}
+pre code {
+  background-color: transparent;
+  border-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
 ul,
 ol {
   margin: 0 0 1rem;
@@ -1589,34 +1607,34 @@ textarea.form-input {
   -webkit-transform: translate(-50%, -0.5rem);
           transform: translate(-50%, -0.5rem);
 }
-.tooltip[data-tooltip-pos="right"]::after {
+.tooltip.tooltip-right::after {
   bottom: 50%;
   left: 100%;
   -webkit-transform: translate(0, 50%);
           transform: translate(0, 50%);
 }
-.tooltip[data-tooltip-pos="right"]:hover::after {
+.tooltip.tooltip-right:hover::after {
   -webkit-transform: translate(0.5rem, 50%);
           transform: translate(0.5rem, 50%);
 }
-.tooltip[data-tooltip-pos="bottom"]::after {
+.tooltip.tooltip-bottom::after {
   top: 100%;
   bottom: auto;
   -webkit-transform: translate(-50%, 0);
           transform: translate(-50%, 0);
 }
-.tooltip[data-tooltip-pos="bottom"]:hover::after {
+.tooltip.tooltip-bottom:hover::after {
   -webkit-transform: translate(-50%, 0.5rem);
           transform: translate(-50%, 0.5rem);
 }
-.tooltip[data-tooltip-pos="left"]::after {
+.tooltip.tooltip-left::after {
   right: 100%;
   bottom: 50%;
   left: auto;
   -webkit-transform: translate(0, 50%);
           transform: translate(0, 50%);
 }
-.tooltip[data-tooltip-pos="left"]:hover::after {
+.tooltip.tooltip-left:hover::after {
   -webkit-transform: translate(-0.5rem, 50%);
           transform: translate(-0.5rem, 50%);
 }
diff --git a/src/tooltips.less b/src/tooltips.less
index 4d0f680..1ccc98b 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -30,7 +30,7 @@
     }
   }
 
-  &[data-tooltip-pos="right"] {
+  &.tooltip-right {
     &::after {
       bottom: 50%;
       left: 100%;
@@ -42,7 +42,7 @@
       }
     }
   }
-  &[data-tooltip-pos="bottom"] {
+  &.tooltip-bottom {
     &::after {
       top: 100%;
       bottom: auto;
@@ -54,7 +54,7 @@
       }
     }
   }
-  &[data-tooltip-pos="left"] {
+  &.tooltip-left {
     &::after {
       right: 100%;
       bottom: 50%;
diff --git a/src/typography.less b/src/typography.less
index 94a596f..4a9476f 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -50,6 +50,24 @@ blockquote {
     color: lighten(@body-font-color, 50%);
   }
 }
+code,
+pre {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border-left: .2rem solid #ddd;
+  line-height: 1.8rem;
+  background-color: @core-border-color;
+}
+code {
+  padding: 1rem 2rem;
+}
+pre code {
+  background-color: transparent;
+  border-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
 ul,
 ol {
   margin: 0 0 1rem;