source/stylesheets/refills/_tooltip.scss in refills-0.0.2 vs source/stylesheets/refills/_tooltip.scss in refills-0.1.0

@@ -1,49 +1,72 @@
-.tooltip-item {
-  $tooltip-background: transparentize($dark-gray, 0.1);
-  $tooltip-color: white;
-  $tooltip-width: 10em;
+.tooltip-item {  
+  ///////////////////////////////////////////////////////////////////////////////////
+  $base-border-color: gainsboro !default;
+  $base-border-radius: 3px !default;
+  $base-line-height: 1.5em !default;
+  $dark-gray: #333 !default;
+  $base-font-color: $dark-gray !default;
+  
+  p {
+    color: $base-font-color;
+    line-height: $base-line-height;
+    margin: 0;
+  }
+  //////////////////////////////////////////////////////////////////////////////////
 
-  border: 1px solid $base-border-color;
-  padding: .5em 1em;
+  $tooltip-background: white;
+  $tooltip-color: $base-font-color;
+  $tooltip-max-width: 16em;
+  $tooltip-arrow-width: 8px;
+  $tooltip-shadow: 0 2px 2px silver;
+  $tooltip-distance-from-item: 3em;
+  $tooltip-arrow-distance-from-box: -1.3em;
+
+  background: $tooltip-background;
   border-radius: $base-border-radius;
+  border: 1px solid $base-border-color;
+  display: inline-block;
+  padding: 0.5em 1em;
   position: relative;
-  margin-bottom: $base-line-height;
+  text-align: center;
 
+  &:focus,
   &:hover .tooltip {
     opacity: 1;
     visibility: visible;
   }
 
   .tooltip {
-    @include position(absolute, 0 0 0 50%);
-    @include box-sizing(border-box);
+    @include position(absolute, null 0 $tooltip-distance-from-item 0);
     @include transition (all 0.2s ease-in-out);
-    bottom: 130%;
     background-color: $tooltip-background;
+    background: #fff;
     border-radius: $base-border-radius;
+    box-shadow: $tooltip-shadow;
     color: $tooltip-color;
-    font-size: .9em; // Make sure you use -webkit-backface-visibility: hidden; on the body element to prevent 1px nudging bugs.
+    font-size: 0.9em; // Make sure you use -webkit-backface-visibility: hidden; on the body element to prevent 1px nudging bugs.
     line-height: 1.5em;
-    margin-left: -($tooltip-width/2);
+    margin: 0 auto;
+    max-width: $tooltip-max-width;
     opacity: 0;
-    padding: .5em 0;
+    padding: 1em;
     text-align: center;
     visibility: hidden;
-    min-width: $tooltip-width;
     z-index: 10;
 
     p {
       margin-bottom: 0;
     }
 
     &:after {
-      @include size(0);
-      @include position(absolute, 0 0 0 $tooltip-width/2);
-      border: 8px solid transparent;
-      border-top-color: $tooltip-background;
-      content: '';
-      pointer-events: none;
-      bottom: -15px;
+      @include position(absolute, null 0 null 0);
+      border: $tooltip-arrow-width solid transparent;
+      bottom: $tooltip-arrow-distance-from-box;
+      color: $tooltip-background;
+      content: '▼';
+      font-size: 1.4em;
+      margin-left: -$tooltip-arrow-width;
+      text-align: center;
+      text-shadow: $tooltip-shadow;
     }
   }
 }