tooltips done right

css/tooltips.css

@@ -8,58 +8,62 @@
   position:relative;
 }
 
-*[data-tooltip]::before {
-    content:attr(data-tooltip);
-    top:-3em;
-    left:-2em;
-    height:1.5em;
-    min-width:5em;
-    max-width:20em;
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
-    padding:0.5em 0.7em 0.7em 0.7em;
-    display:block;
-    border-radius:0.3em;
-    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;
+  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:-3.1em;
+  left:-2em;
+  height:1.5em;
+  min-width:5em;
+  max-width:20em;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  padding:0.5em 0.7em 0.7em 0.7em;
+  display:block;
+  border-radius:0.3em;
+  text-align:center;
+  
+  color:white;
+  background-color:rgba(6,6,6,0);
+}
+
+*[data-tooltip]::after {
+  content:" ";
+  background:transparent;
+  width:1px;
+  height:1px;
+  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.9ex;
+  left:50%;
+  margin-left:-0.3em;
+}
+
 *[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;
+  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]::after {
-    content:" ";
-    background:transparent;
-    width:1px;
-    height:1px;
-    border:solid 0.4em #060606;
-    display:block;
-    border-bottom:none;
-    border-left:solid 0.3em transparent;
-    border-right:solid 0.3em transparent;
-    top:-0.3em;
-    left:50%;
-    margin-left:-0.5em;
+*[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">