From 5a16c4bd1f5d887e342d5cdc01d0f9aa49ae28be Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Thu, 28 Aug 2014 09:25:04 +0200
Subject: [PATCH] First version of own tooltip.

---
 .../_application_controller.js.coffee         |  2 +-
 app/assets/stylesheets/zzz.css.erb            | 44 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/app/controllers/_application_controller.js.coffee b/app/assets/javascripts/app/controllers/_application_controller.js.coffee
index 8b3a4943a..88016e430 100644
--- a/app/assets/javascripts/app/controllers/_application_controller.js.coffee
+++ b/app/assets/javascripts/app/controllers/_application_controller.js.coffee
@@ -207,7 +207,7 @@ class App.Controller extends Spine.Controller
 #        console.log('rewrite frontendTimeUpdate', this, $(this).hasClass('escalation'))
         timestamp = $(this).data('time')
         time = ui.humanTime( timestamp, $(this).hasClass('escalation') )
-        $(this).attr( 'title', App.i18n.translateTimestamp(timestamp) )
+        $(this).attr( 'data-tooltip', App.i18n.translateTimestamp(timestamp) )
         $(this).html( time )
       )
     App.Interval.set( update, 30000, 'frontendTimeUpdate', 'ui' )
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 4f5618bc1..292f95091 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -19,6 +19,50 @@ small {
   z-index: 1;
 }
 
+/* tooltip */
+a[data-tooltip],
+time[data-tooltip],
+span[data-tooltip] {
+  position: relative;
+  z-index: 99000;
+}
+a[data-tooltip]:before,
+time[data-tooltip]:before,
+span[data-tooltip]:before {
+  position: absolute;
+  left: 0;
+  top: -34px;
+  background-color: #c6c6c5;
+  color: #ffffff;
+  height: 26px;
+  line-height: 27px;
+  border-radius: 5px;
+  padding: 0 13px;
+  content: attr(data-tooltip);
+  white-space: nowrap;
+  display: none;
+}
+a[data-tooltip]:after,
+time[data-tooltip]:after,
+span[data-tooltip]:after {
+  position: absolute;
+  left: 13px;
+  top: -8px;
+  border-top: 7px solid #c6c6c5;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  content: "";
+  display: none;
+}
+a[data-tooltip]:hover:after,
+a[data-tooltip]:hover:before,
+time[data-tooltip]:hover:after,
+time[data-tooltip]:hover:before,
+span[data-tooltip]:hover:after,
+span[data-tooltip]:hover:before {
+  display: block;
+}
+
 .glyphicon {
   font-size: 13px;
 }