Allow multiline and single line, defaulting to single line, tooltips.

Author: earnubs

gulpfile.js

@@ -9,7 +9,7 @@ gulp.task('build', function() {
   .pipe(gulp.dest('.'));
 });
 
-gulp.task('watch', function() {
+gulp.task('watch', ['build'], function() {
   gulp.watch('src/*.css', ['default']);
 });
 

src/tt.css

@@ -4,50 +4,51 @@
 }
 
 [data-tt]::before, [data-tt]::after {
+  border:none;
   box-sizing: inherit;
   display:inline-block;
-  visibility:hidden;
-  opacity:0;
-  position:absolute;
-  top:100%;
-  left:50%;
-  transition:all 0.2s ease-out 100ms;
-  z-index:1000000;
-  border:none;
   font-size:13px;
+  font-style:normal;
+  font-weight:300;
   line-height:18px;
+  opacity:0;
+  pointer-events: none;
+  position:absolute;
+  right:50%;
   text-align:center;
   text-decoration:none;
   text-shadow:none;
   text-transform:none;
-  font-style:normal;
-  font-weight:300;
+  top:100%;
+  transform: translateX(50%);
+  transition:opacity 0.2s step-start 100ms;
+  visibility:hidden;
+  z-index:1000000;
 }
 
 /** tooltip body **/
 [data-tt]::before {
-  width:160px;
-  content:attr(data-tt);
   background:rgb(51,51,51);
-  color:#ddd;  
   border-radius:3px;
-  margin-left:-80px;
+  color:#eee;  
+  content:attr(data-tt);
+  margin:10px 0 0 0;
   padding:9px 13px;
+  white-space: pre;
+  word-wrap: break-word;
 }
 
 /** tooltip pointer **/
 [data-tt]::after {
-  content:'';
   border:5px solid transparent;
-  background-color:transparent;
   border-bottom-color:#333;
-  margin:-10px 0 0 -5px;
+  content:'';
+  margin:0 0 0 -5px;
 }
 
 [data-tt]:hover::before, [data-tt]:hover::after {
   visibility:visible;
   opacity:1;
-  transform: translateY(10px);
 }
 
 /** position N, S, E or West of content based on class **/
@@ -57,44 +58,41 @@
 }
 .tt-e::before, .tt-e::after,
 .tt-w::before, .tt-w::after {
-  top:50%;
+  top:auto;
+  bottom:50%;
+  transform: translateY(50%);
 }
 .tt-e::before, .tt-e::after {
   left:100%;
+  right:auto;
 }
 .tt-w::before, .tt-w::after {
   left:auto;
   right:100%;
 }
-.tt-e::before, .tt-w::before {
-  margin-left:0;
-  margin-top:-18px; /** (line-height + vertical padding) / 2 **/
+
+.tt-n::before {
+  margin:0 0 10px 0;
+}
+.tt-e::before {
+  margin:0 0 0 10px;
+}
+.tt-w::before {
+  margin:0 10px 0 0;
 }
 
 .tt-n::after {
   border-color:transparent;
   border-top-color:#333;
-  margin:0 0 -10px -5px;
+  margin:0 0 0 5px;
 }
 .tt-e::after, .tt-w::after {
   border-color:transparent;
-  margin-top:-5px; /** border size * 1 **/
+  margin:5px 0 0 0; 
 }
 .tt-e::after {
   border-right-color:#333;
-  margin-left: -10px; /** border size * 2 **/
 }
 .tt-w::after {
   border-left-color:#333;
-  margin-right: -10px; /** border size * 2 **/
-}
-.tt-n:hover::before,.tt-n:hover::after {
-  transform: translateY(-10px);
 }
-.tt-e:hover::before, .tt-e:hover::after {
-  transform: translateX(10px);
-}
-.tt-w:hover::before, .tt-w:hover::after {
-  transform: translateX(-10px);
-}
-