feat: redesign Tooltip

examples/vite/src/AppSettings/ActionsMenu/ActionsMenu.tsx

@@ -5,6 +5,7 @@ import {
   ContextMenu,
   ContextMenuButton,
   IconBolt,
+  Tooltip,
   useContextMenuContext,
   useDialogIsOpen,
   useDialogOnNearestManager,
@@ -48,12 +49,12 @@ const ActionsMenuButton = ({
       )}
     </Button>
     {iconOnly && (
-      <div
+      <Tooltip
         aria-hidden='true'
-        className='str-chat__chat-view__selector-button-tooltip str-chat__tooltip'
+        className='str-chat__chat-view__selector-button-tooltip'
       >
         Actions
-      </div>
+      </Tooltip>
     )}
   </div>
 );

examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx

@@ -16,6 +16,7 @@ import {
   IconExclamationTriangleFill,
   IconPlusSmall,
   NumericInput,
+  PopperTooltip,
   Prompt,
   TextInput,
   useNotificationApi,
@@ -105,54 +106,85 @@ const NotificationChipList = ({
 }: {
   notifications: QueuedNotification[];
   removeQueuedNotification: (id: string) => void;
-}) => (
-  <div className='app__notification-dialog__chips' role='list'>
-    {notifications.map((notification) => {
-      const SeverityIcon = severityIcons[notification.severity];
-      const DirectionIcon = directionIcons[notification.entryDirection];
-
-      return (
-        <div
-          className='app__notification-dialog__chip'
-          key={notification.id}
-          role='listitem'
-          title={notification.message}
-        >
-          {SeverityIcon && (
-            <SeverityIcon className='app__notification-dialog__chip-icon' />
-          )}
-          <span className='app__notification-dialog__chip-text'>
-            {notification.message}
-          </span>
-          <span className='app__notification-dialog__chip-meta'>
-            <span className='app__notification-dialog__chip-meta-item'>
-              <IconClock className='app__notification-dialog__chip-meta-icon' />
-              {formatDurationLabel(notification.duration)}
-            </span>
-            <span className='app__notification-dialog__chip-meta-item'>
-              <DirectionIcon className='app__notification-dialog__chip-meta-icon' />
-              {notification.entryDirection}
+}) => {
+  const [tooltipState, setTooltipState] = useState<{
+    referenceElement: HTMLDivElement;
+    text: string;
+  } | null>(null);
+
+  return (
+    <div className='app__notification-dialog__chips' role='list'>
+      {notifications.map((notification) => {
+        const SeverityIcon = severityIcons[notification.severity];
+        const DirectionIcon = directionIcons[notification.entryDirection];
+
+        return (
+          <div
+            className='app__notification-dialog__chip'
+            key={notification.id}
+            onBlurCapture={(event) => {
+              if (event.currentTarget.contains(event.relatedTarget as Node | null)) {
+                return;
+              }
+              setTooltipState(null);
+            }}
+            onFocusCapture={(event) =>
+              setTooltipState({
+                referenceElement: event.currentTarget,
+                text: notification.message,
+              })
+            }
+            onMouseEnter={(event) =>
+              setTooltipState({
+                referenceElement: event.currentTarget,
+                text: notification.message,
+              })
+            }
+            onMouseLeave={() => setTooltipState(null)}
+            role='listitem'
+          >
+            {SeverityIcon && (
+              <SeverityIcon className='app__notification-dialog__chip-icon' />
+            )}
+            <span className='app__notification-dialog__chip-text'>
+              {notification.message}
             </span>
-            <span className='app__notification-dialog__chip-panel'>
-              {notification.targetPanel}
+            <span className='app__notification-dialog__chip-meta'>
+              <span className='app__notification-dialog__chip-meta-item'>
+                <IconClock className='app__notification-dialog__chip-meta-icon' />
+                {formatDurationLabel(notification.duration)}
+              </span>
+              <span className='app__notification-dialog__chip-meta-item'>
+                <DirectionIcon className='app__notification-dialog__chip-meta-icon' />
+                {notification.entryDirection}
+              </span>
+              <span className='app__notification-dialog__chip-panel'>
+                {notification.targetPanel}
+              </span>
             </span>
-          </span>
-          <Button
-            appearance='ghost'
-            aria-label={`Remove ${notification.message}`}
-            circular
-            className='app__notification-dialog__chip-remove'
-            onClick={() => removeQueuedNotification(notification.id)}
-            size='xs'
-            variant='secondary'
-          >
-            <IconXmark />
-          </Button>
-        </div>
-      );
-    })}
-  </div>
-);
+            <Button
+              appearance='ghost'
+              aria-label={`Remove ${notification.message}`}
+              circular
+              className='app__notification-dialog__chip-remove'
+              onClick={() => removeQueuedNotification(notification.id)}
+              size='xs'
+              variant='secondary'
+            >
+              <IconXmark />
+            </Button>
+          </div>
+        );
+      })}
+      <PopperTooltip
+        referenceElement={tooltipState?.referenceElement ?? null}
+        visible={!!tooltipState}
+      >
+        {tooltipState?.text ?? ''}
+      </PopperTooltip>
+    </div>
+  );
+};
 
 const NotificationDraftForm = ({
   draft,

examples/vite/src/Sidebar/SidebarToggle.tsx

@@ -1,21 +1,40 @@
+import { useState } from 'react';
 import { useSidebar } from '../ChatLayout/SidebarContext.tsx';
-import { Button, useTranslationContext } from 'stream-chat-react';
+import { Button, PopperTooltip, useTranslationContext } from 'stream-chat-react';
 import { IconSidebar } from '../icons.tsx';
 
 export const SidebarToggle = () => {
   const { closeSidebar, openSidebar, sidebarOpen } = useSidebar();
   const { t } = useTranslationContext();
+  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null);
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const tooltipText = sidebarOpen ? 'Close sidebar' : 'Open sidebar';
+
   return (
-    <Button
-      appearance='ghost'
-      aria-label={sidebarOpen ? t('aria/Collapse sidebar') : t('aria/Expand sidebar')}
-      circular
-      className='str-chat__header-sidebar-toggle'
-      onClick={sidebarOpen ? closeSidebar : openSidebar}
-      size='md'
-      variant='secondary'
-    >
-      <IconSidebar />
-    </Button>
+    <>
+      <Button
+        appearance='ghost'
+        aria-label={sidebarOpen ? t('aria/Collapse sidebar') : t('aria/Expand sidebar')}
+        circular
+        className='str-chat__header-sidebar-toggle'
+        onBlur={() => setTooltipVisible(false)}
+        onClick={sidebarOpen ? closeSidebar : openSidebar}
+        onFocus={() => setTooltipVisible(true)}
+        onMouseEnter={() => setTooltipVisible(true)}
+        onMouseLeave={() => setTooltipVisible(false)}
+        ref={setButtonElement}
+        size='md'
+        variant='secondary'
+      >
+        <IconSidebar />
+      </Button>
+      <PopperTooltip
+        offset={[0, 8]}
+        referenceElement={buttonElement}
+        visible={tooltipVisible}
+      >
+        {tooltipText}
+      </PopperTooltip>
+    </>
   );
 };

src/components/ChatView/styling/ChatView.scss

@@ -33,7 +33,7 @@
       display: flex;
       position: relative;
 
-      &:focus-within .str-chat__chat-view__selector-button-tooltip,
+      &:focus-visible + .str-chat__chat-view__selector-button-tooltip,
       &:hover .str-chat__chat-view__selector-button-tooltip {
         opacity: 1;
         transform: translate3d(0, -50%, 0);

src/components/Tooltip/Tooltip.tsx

@@ -2,16 +2,19 @@ import type { ComponentProps } from 'react';
 import React, { useEffect, useState } from 'react';
 import type { PopperLikePlacement } from '../Dialog';
 import { usePopoverPosition } from '../Dialog/hooks/usePopoverPosition';
+import clsx from 'clsx';
 
-export const Tooltip = ({ children, ...rest }: ComponentProps<'div'>) => (
-  <div className='str-chat__tooltip' {...rest}>
+export const Tooltip = ({ children, className, ...rest }: ComponentProps<'div'>) => (
+  <div className={clsx('str-chat__tooltip', className)} {...rest}>
     {children}
   </div>
 );
 
 export type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<{
   /** Reference element to which the tooltip should attach to */
   referenceElement: T | null;
+  /** Custom class to be merged along the defaults */
+  className?: string;
   /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */
   offset?: [number, number];
   /** Popper's placement property defining default position of the tooltip, default 'top' */
@@ -22,6 +25,7 @@ export type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<
 
 export const PopperTooltip = <T extends HTMLElement>({
   children,
+  className,
   offset = [0, 10],
   placement = 'top',
   referenceElement,
@@ -51,7 +55,7 @@ export const PopperTooltip = <T extends HTMLElement>({
 
   return (
     <div
-      className='str-chat__tooltip'
+      className={clsx('str-chat__tooltip', className)}
       data-placement={resolvedPlacement}
       ref={setPopperElement}
       style={{ left: x ?? 0, position: strategy, top: y ?? 0 }}

src/components/Tooltip/styling/Tooltip.scss

@@ -5,10 +5,10 @@
   --str-chat__tooltip-border-radius: var(--radius-md);
 
   /* The text/icon color of the component */
-  --str-chat__tooltip-color: var(--str-chat__text-color);
+  --str-chat__tooltip-color: var(--text-inverse);
 
   /* The background color of the component */
-  --str-chat__tooltip-background-color: var(--background-core-elevation-2);
+  --str-chat__tooltip-background-color: var(--background-core-inverse);
 
   /* Top border of the component */
   --str-chat__tooltip-border-block-start: none;
@@ -23,14 +23,15 @@
   --str-chat__tooltip-border-inline-end: none;
 
   /* Box shadow applied to the component */
-  --str-chat__tooltip-box-shadow: 0 0 20px var(--str-chat__box-shadow-color);
+  --str-chat__tooltip-box-shadow: var(--str-chat__box-shadow-3);
 }
 
 .str-chat__tooltip {
   @include utils.component-layer-overrides('tooltip');
   @include utils.prevent-glitch-text-overflow;
   display: flex;
-  padding: var(--space-8);
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
   z-index: 1;
   max-width: calc(var(--str-chat__spacing-px) * 150);
   width: max-content;