diff --git a/styles.css b/styles.css
index 0f33d91..010ef02 100644
--- a/styles.css
+++ b/styles.css
@@ -3385,44 +3385,34 @@ p {
 /* pagination */
 /* pre */
 /* tag */
-.tooltip {
+.tooltip > i {
+  font-size: 0.9rem;
   position: relative;
-  cursor: pointer;
-  display: inline-block; }
-  .tooltip > i {
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    -ms-border-radius: 3px;
-    border-radius: 3px;
-    background-clip: padding-box;
-    text-align: center;
-    font-size: 0.7em;
-    color: #fff;
-    line-height: 1.0em;
-    background: #000000;
-    position: absolute;
-    padding: 5px;
-    bottom: 100%;
-    left: -50%;
-    margin-bottom: 10px;
+  z-index: 2;
+  cursor: pointer; }
+  .tooltip > i:before, .tooltip > i:after {
     visibility: hidden;
     opacity: 0;
-    white-space: pre; }
-  .tooltip > i:before, .tooltip > i:after {
-    content: "";
+    pointer-events: none; }
+  .tooltip > i:before {
+    white-space: nowrap;
     position: absolute;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    top: 100%;
-    left: 50%;
-    margin-left: -10px; }
-  .tooltip > i:after {
-    border-top: 10px solid #000000;
-    margin-top: 0;
-    z-index: 1; }
-  .tooltip:hover > i {
-    visibility: visible;
-    opacity: 1; }
+    bottom: 150%;
+    margin-bottom: 5px;
+    padding: 7px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #000;
+    background-color: rgba(51, 51, 51, 0.9);
+    color: #fff;
+    content: attr(data-tooltip);
+    text-align: center; }
+
+.tooltip:hover > i:before,
+.tooltip:hover > i:after {
+  visibility: visible;
+  opacity: 1; }
 
 .spinner-1 {
   width: 40px;
diff --git a/tooltip.css b/tooltip.css
index 8812ef6..fabbf3a 100644
--- a/tooltip.css
+++ b/tooltip.css
@@ -18,43 +18,33 @@
 /* pagination */
 /* pre */
 /* tag */
-.tooltip {
+.tooltip > i {
+  font-size: 0.9rem;
   position: relative;
-  cursor: pointer;
-  display: inline-block; }
-  .tooltip > i {
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    -ms-border-radius: 3px;
-    border-radius: 3px;
-    background-clip: padding-box;
-    text-align: center;
-    font-size: 0.7em;
-    color: #fff;
-    line-height: 1.0em;
-    background: #000000;
-    position: absolute;
-    padding: 5px;
-    bottom: 100%;
-    left: -50%;
-    margin-bottom: 10px;
+  z-index: 2;
+  cursor: pointer; }
+  .tooltip > i:before, .tooltip > i:after {
     visibility: hidden;
     opacity: 0;
-    white-space: pre; }
-  .tooltip > i:before, .tooltip > i:after {
-    content: "";
+    pointer-events: none; }
+  .tooltip > i:before {
+    white-space: nowrap;
     position: absolute;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    top: 100%;
-    left: 50%;
-    margin-left: -10px; }
-  .tooltip > i:after {
-    border-top: 10px solid #000000;
-    margin-top: 0;
-    z-index: 1; }
-  .tooltip:hover > i {
-    visibility: visible;
-    opacity: 1; }
+    bottom: 150%;
+    margin-bottom: 5px;
+    padding: 7px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #000;
+    background-color: rgba(51, 51, 51, 0.9);
+    color: #fff;
+    content: attr(data-tooltip);
+    text-align: center; }
+
+.tooltip:hover > i:before,
+.tooltip:hover > i:after {
+  visibility: visible;
+  opacity: 1; }
 
 /*# sourceMappingURL=tooltip.css.map */
diff --git a/tooltip.scss b/tooltip.scss
index fa29a55..66469b3 100644
--- a/tooltip.scss
+++ b/tooltip.scss
@@ -1,45 +1,37 @@
 @import "_mixins", "_vars";
 
-.tooltip {
+.tooltip > i {
+    font-size: 0.85rem;
     position: relative;
+    z-index: 2;
     cursor: pointer;
-    display: inline-block;
 
-    > i {
-        @include border-radius(3px);
-        text-align: center;
-        font-size: 0.7em;
-        color: #fff;
-        line-height: 1.0em;
-        background: #000000;
-        position: absolute;
-        padding: 5px;
-        bottom: 100%;
-        left: -50%;
-        margin-bottom: 10px;
+    &:before,
+    &:after {
         visibility: hidden;
         opacity: 0;
-        white-space: pre;
+        pointer-events: none;
     }
 
-    > i:before,  > i:after {
-        content: "";
+    &:before {
+        white-space: nowrap;
         position: absolute;
-        border-left: 10px solid transparent;
-        border-right: 10px solid transparent;
-        top: 100%;
-        left: 50%;
-        margin-left: -10px;
-    }
-
-    > i:after{
-        border-top: 10px solid #000000;
-        margin-top: 0;
-        z-index: 1;
-    }
-
-    &:hover > i {
-        visibility: visible;
-        opacity: 1;
+        bottom: 150%;
+        margin-bottom: 5px;
+        padding: 7px;
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        background-color: #000;
+        background-color: hsla(0, 0%, 20%, 0.9);
+        color: #fff;
+        content: attr(data-tooltip);
+        text-align: center;
     }
 }
+
+.tooltip:hover > i:before,
+.tooltip:hover > i:after {
+    visibility: visible;
+    opacity: 1;
+}
\ No newline at end of file