tooltips done right

css/tooltips.css

@@ -8,9 +8,22 @@
   position:relative;
 }
 
+*[data-tooltip]::before,
+*[data-tooltip]::after {
+  position:absolute;
+  opacity:0.8;
+  visibility:hidden;
+  font-size:80%;
+  font-family:sans-serif;
+  transition-duration:0s;
+  -moz-transition-duration:0s;
+  -webkit-transition-duration:0s;
+    
+}
+
 *[data-tooltip]::before {
   content:attr(data-tooltip);
-    top:-3em;
+  top:-3.1em;
   left:-2em;
   height:1.5em;
   min-width:5em;
@@ -24,29 +37,7 @@
   text-align:center;
   
   color:white;
-    background:#060606;
-}
-
-*[data-tooltip]::before,
-*[data-tooltip]::after {
-    position:absolute;
-    opacity:0.2;
-    visibility:hidden;
-    font-size:80%;
-    font-family:sans-serif;
-    transition-duration:0s;
-    -moz-transition-duration:0s;
-    -webkit-transition-duration:0s;
-    
-}
-
-*[data-tooltip]:hover::before,
-*[data-tooltip]:hover::after {
-    opacity:0.8;
-    visibility:visible;
-    transition:opacity 0.3s ease-out;
-    -moz-transition:opacity 0.3s ease-out;
-    -webkit-transition:opacity 0.3s ease-out;
+  background-color:rgba(6,6,6,0);
 }
 
 *[data-tooltip]::after {
@@ -54,12 +45,25 @@
   background:transparent;
   width:1px;
   height:1px;
-    border:solid 0.4em #060606;
+  border:solid 0.4em rgba(6, 6, 6, 0);
   display:block;
   border-bottom:none;
   border-left:solid 0.3em transparent;
   border-right:solid 0.3em transparent;
-    top:-0.3em;
+  top:-0.9ex;
   left:50%;
-    margin-left:-0.5em;
+  margin-left:-0.3em;
+}
+
+*[data-tooltip]:hover::before,
+*[data-tooltip]:hover::after {
+  border-top-color:rgba(6,6,6,1);
+  visibility:visible;
+  transition:background-color 0.3s ease-out, border-top-color 0.3s ease-out;
+  -moz-transition:background-color 0.3s ease-out, border-top-color 0.3s ease-out;
+  -webkit-transition:background-color 0.3s ease-out, border-top-color 0.3s ease-out;
+}
+
+*[data-tooltip]:hover::before {
+  background-color:rgba(6,6,6,1);
 }

templates/part.choosecalendar.rowfields.php

@@ -14,7 +14,7 @@
     title="<?php p($l->t('Share Calendar')) ?>"
     class="action permanent"
     data-tooltip="<?php p($l->t('Share Calendar')) ?>"
-    style="cursor: pointer; width:20px; height:20px; display:block; background-repeat:no-repeat; background-image: url(<?php print_unescaped($_['share_icon']); ?>);"></label>
+    style="cursor: pointer;"><img class="svg" src="<?php print_unescaped($_['share_icon']); ?>"/></label>
   <?php endif; ?>
 </td>
 <td width="20px">