Update tooltips to transition and to use friendly names when possible

packages/bbui/src/Button/Button.svelte

@@ -16,8 +16,6 @@
   export let tooltip = undefined
   export let newStyles = true
   export let id
-
-  let showTooltip = false
 </script>
 
 <button
@@ -35,9 +33,6 @@
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
   on:click|preventDefault
-  on:mouseover={() => (showTooltip = true)}
-  on:focus={() => (showTooltip = true)}
-  on:mouseleave={() => (showTooltip = false)}
 >
   {#if icon}
     <svg
@@ -53,24 +48,7 @@
     <span class="spectrum-Button-label"><slot /></span>
   {/if}
   {#if tooltip}
-    <div
-      class="tooltip-icon"
-      on:mouseover={() => (showTooltip = true)}
-      on:focus={() => (showTooltip = true)}
-      on:mouseleave={() => (showTooltip = false)}
-    >
-      <svg
-        class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
-        focusable="false"
-        aria-hidden="true"
-        aria-label="Info"
-      >
-        <use xlink:href="#spectrum-icon-18-InfoOutline" />
-      </svg>
-    </div>
-  {/if}
-  {#if tooltip}
-    <div class="tooltip" class:visible={showTooltip}>
+    <div class="tooltip">
       <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
     </div>
   {/if}
@@ -103,7 +81,7 @@
     transition: opacity 130ms ease-out;
     pointer-events: none;
   }
-  .tooltip.visible {
+  button:hover .tooltip {
     opacity: 1;
   }
   .tooltip-icon {

packages/frontend-core/src/components/UserAvatar.svelte

@@ -33,7 +33,7 @@
         <Tooltip
           direction={tooltipDirection}
           textWrapping
-          text={user.email}
+          text={helpers.getUserLabel(user)}
           size="S"
         />
       </div>
@@ -46,13 +46,15 @@
     position: relative;
   }
   .tooltip {
-    display: none;
     position: absolute;
     top: 0;
     left: 50%;
     white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 130ms ease-out;
   }
   .user-avatar:hover .tooltip {
-    display: block;
+    opacity: 1;
   }
 </style>