diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 97ad0a566..13903d6b1 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -28,8 +28,20 @@ span[data-tooltip] {
 }
 a[data-tooltip]:before,
 time[data-tooltip]:before,
-span[data-tooltip]:before {
+span[data-tooltip]:before,
+a[data-tooltip]:after,
+time[data-tooltip]:after,
+span[data-tooltip]:after {
+  content: "";
   position: absolute;
+  pointer-events: none;
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 300ms cubic-bezier(0.34,1.6,0.71,1), opacity 300ms;
+}
+a[data-tooltip]:before,
+time[data-tooltip]:before,
+span[data-tooltip]:before {
   left: 0;
   top: -34px;
   background-color: #c6c6c5;
@@ -40,19 +52,17 @@ span[data-tooltip]:before {
   padding: 0 13px;
   content: attr(data-tooltip);
   white-space: nowrap;
-  display: none;
+  transform-origin: 17px 26px;
 }
 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;
+  transform-origin: 4px 0;
 }
 a[data-tooltip]:hover:after,
 a[data-tooltip]:hover:before,
@@ -60,7 +70,10 @@ time[data-tooltip]:hover:after,
 time[data-tooltip]:hover:before,
 span[data-tooltip]:hover:after,
 span[data-tooltip]:hover:before {
-  display: block;
+  pointer-events: auto;
+  transform: scale(1);
+  opacity: 1;
+  transition: transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s;
 }
 
 .glyphicon {