(master): Namespace tooltip, and clean it up.

Author: Joe Crick

index.html

@@ -994,7 +994,7 @@ <h2>Heading 3</h2>
                     <a name="tooltip"></a>
                     <h2 class="content-subhead">Tooltip</h2>
 
-                    <div class="tooltip">
+                    <div class="pcssc-tooltip">
                         <span class="tooltip-target">Hover Me.</span>
                         <div class="tooltip-body">
                             <p>All around the mulberry bush, the Plunky chased the Sneezle</p>
@@ -1003,7 +1003,7 @@ <h2 class="content-subhead">Tooltip</h2>
 
                     <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                             style="margin: 0; line-height: 125%">
-&lt;div class=<span style="color: #a31515">&quot;tooltip&quot;</span>&gt;
+&lt;div class=<span style="color: #a31515">&quot;pcssc-tooltip&quot;</span>&gt;
     &lt;span class=<span style="color: #a31515">&quot;tooltip-target&quot;</span>&gt;Hover Me.&lt;/span&gt;
     &lt;div class=<span style="color: #a31515">&quot;tooltip-body&quot;</span>&gt;
         &lt;p&gt;All around the mulberry bush, the Plunky chased the Sneezle&lt;/p&gt;

main.css

@@ -1,13 +1,8 @@
 @import '../lib/variables';
 
-.tooltip {
+.pcssc-tooltip {
   display: inline-block;
 
-  @media @smart-phone {
-    min-width: 0;
-    font-size: 12px;
-  }
-
   .tooltip-target {
     cursor: help;
 
@@ -20,22 +15,7 @@
   .tooltip-body {
     display: none;
     position: absolute;
-    padding: 20px;
-    text-align: justify;
-    min-width: 250px;
-    max-width: 350px;
-    z-index: 2000;
-
-    @media @medium-device {
-      min-width: 200px;
-    }
-
-    @media @smart-phone {
-      left: -150px;
-      max-width: 200px;
-      min-width: 100px;
-    }
-
+    z-index: 1500;
   }
 
 }

main.css.map

@@ -49,9 +49,18 @@ body {
     border: 1px solid green;
   }
 
-  .tooltip {
+  .pcssc-tooltip {
     margin-bottom: 30px;
 
+    @media @smart-phone {
+      min-width: 0;
+      font-size: 12px;
+    }
+
+    @media @medium-device {
+      font-size: inherit;
+    }
+
     .tooltip-target {
       border: 1px solid lightgrey;
       border-radius: 5px;
@@ -61,6 +70,23 @@ body {
     .tooltip-body {
       margin-top: -90px;
       margin-left: 100px;
+      text-align: justify;
+      padding: 20px;
+      min-width: 250px;
+      max-width: 350px;
+
+      @media @smart-phone {
+        left: -150px;
+        max-width: 200px;
+        min-width: 100px;
+      }
+
+      @media @medium-device {
+        min-width: 200px;
+        max-width: 300px;
+        left: inherit;
+      }
+
     }
 
   }