Make Mantine tooltips consistent with legacy tooltips (#38678)

frontend/src/metabase/browse/components/LastEdited.tsx

@@ -65,7 +65,7 @@ export const LastEdited = ({
   ).jt`Last edited by ${editorFullName}${(<br key="br" />)}${time}`;
 
   return (
-    <Tooltip label={tooltipLabel} withArrow disabled={!timeLabel}>
+    <Tooltip label={tooltipLabel} disabled={!timeLabel}>
       <Text role="note" size="small">
         {editorFullName}
         {editorFullName && timePassed && (

frontend/src/metabase/dashboard/components/DashboardButtonTooltip.tsx

-import type { ReactNode } from "react";
-import { Box, Text, Tooltip } from "metabase/ui";
-
-type DashboardButtonTooltipProps = {
-  children: ReactNode;
-  label: string;
-  disabled?: boolean;
-};
-
-export function DashboardButtonTooltip({
-  children,
-  disabled = false,
-  label,
-}: DashboardButtonTooltipProps) {
-  return (
-    <Tooltip
-      py="0.6rem"
-      px="0.75rem"
-      bg="bg-black"
-      offset={4}
-      label={
-        <Text c="inherit" size="sm" fw={700}>
-          {label}
-        </Text>
-      }
-      withArrow
-      arrowSize={10}
-      disabled={disabled}
-    >
-      <Box>{children}</Box>
-    </Tooltip>
-  );
-}

frontend/src/metabase/dashboard/components/DashboardEmbedHeaderButton/DashboardEmbedHeaderButton.tsx

@@ -4,8 +4,7 @@ import { forwardRef } from "react";
 import { useSelector } from "metabase/lib/redux";
 import { getSetting } from "metabase/selectors/settings";
 import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
-import { Flex } from "metabase/ui";
-import { DashboardButtonTooltip } from "../DashboardButtonTooltip";
+import { Flex, Tooltip } from "metabase/ui";
 
 export type DashboardEmbedHeaderButtonProps = {
   onClick?: () => void;
@@ -37,7 +36,7 @@ export const DashboardEmbedHeaderButton = forwardRef(
     };
 
     return (
-      <DashboardButtonTooltip label={tooltipLabel}>
+      <Tooltip label={tooltipLabel}>
         <Flex>
           <DashboardHeaderButton
             data-disabled={disabled}
@@ -49,7 +48,7 @@ export const DashboardEmbedHeaderButton = forwardRef(
             hasBackground={hasBackground}
           />
         </Flex>
-      </DashboardButtonTooltip>
+      </Tooltip>
     );
   },
 );

frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeader.tsx

@@ -76,7 +76,6 @@ import type {
 import { PLUGIN_DASHBOARD_HEADER } from "metabase/plugins";
 import type { UiParameter } from "metabase-lib/parameters/types";
 import { ExtraEditButtonsMenu } from "../ExtraEditButtonsMenu/ExtraEditButtonsMenu";
-import { DashboardButtonTooltip } from "../DashboardButtonTooltip";
 import { SIDEBAR_NAME } from "../../constants";
 import { DashboardHeaderComponent } from "./DashboardHeaderView";
 import { SectionLayoutPreview } from "./SectionLayoutPreview";
@@ -324,21 +323,23 @@ class DashboardHeaderContainer extends Component<DashboardHeaderProps> {
       >
         {t`Cancel`}
       </Button>,
-      <DashboardButtonTooltip
-        disabled={!isSaveDisabled}
-        label={disabledSaveTooltip}
+      <Tooltip
         key="save"
+        label={disabledSaveTooltip}
+        disabled={!isSaveDisabled}
       >
-        <ActionButton
-          actionFn={() => this.onSave()}
-          className="Button Button--primary Button--small"
-          normalText={t`Save`}
-          activeText={t`Saving…`}
-          failedText={t`Save failed`}
-          successText={t`Saved`}
-          disabled={isSaveDisabled}
-        />
-      </DashboardButtonTooltip>,
+        <span>
+          <ActionButton
+            actionFn={() => this.onSave()}
+            className="Button Button--primary Button--small"
+            normalText={t`Save`}
+            activeText={t`Saving…`}
+            failedText={t`Save failed`}
+            successText={t`Saved`}
+            disabled={isSaveDisabled}
+          />
+        </span>
+      </Tooltip>,
     ];
   }
 
@@ -385,53 +386,52 @@ class DashboardHeaderContainer extends Component<DashboardHeaderProps> {
           : t`Add questions`;
 
       buttons.push(
-        <DashboardButtonTooltip
-          key="add-question-element"
-          label={addQuestionButtonHint}
-        >
+        <Tooltip key="add-question-element" label={addQuestionButtonHint}>
           <DashboardHeaderButton
             icon="add"
             isActive={activeSidebarName === SIDEBAR_NAME.addQuestion}
             onClick={() => toggleSidebar(SIDEBAR_NAME.addQuestion)}
             aria-label={t`Add questions`}
           />
-        </DashboardButtonTooltip>,
+        </Tooltip>,
       );
 
       // Text/Headers
       buttons.push(
-        <DashboardButtonTooltip
+        <Tooltip
           key="dashboard-add-heading-or-text-button"
           label={t`Add a heading or text`}
         >
-          <TextOptionsButton
-            onAddMarkdown={() => this.onAddMarkdownBox()}
-            onAddHeading={() => this.onAddHeading()}
-          />
-        </DashboardButtonTooltip>,
+          <span>
+            <TextOptionsButton
+              onAddMarkdown={() => this.onAddMarkdownBox()}
+              onAddHeading={() => this.onAddHeading()}
+            />
+          </span>
+        </Tooltip>,
       );
 
       // Add link card button
       buttons.push(
-        <DashboardButtonTooltip key="add-link-card" label={t`Add link card`}>
+        <Tooltip key="add-link-card" label={t`Add link card`}>
           <DashboardHeaderButton
             aria-label={t`Add link card`}
             onClick={() => this.onAddLinkCard()}
           >
             <Icon name="link" size={18} />
           </DashboardHeaderButton>
-        </DashboardButtonTooltip>,
+        </Tooltip>,
       );
 
       buttons.push(
         <Menu key="add-section" position="bottom-end">
           <Menu.Target>
             <span>
-              <DashboardButtonTooltip label={t`Add section`}>
+              <Tooltip label={t`Add section`}>
                 <DashboardHeaderButton aria-label={t`Add section`}>
                   <Icon name="section" size={18} />
                 </DashboardHeaderButton>
-              </DashboardButtonTooltip>
+              </Tooltip>
             </span>
           </Menu.Target>
           <Menu.Dropdown>
@@ -477,7 +477,7 @@ class DashboardHeaderContainer extends Component<DashboardHeaderProps> {
             }
           >
             <div>
-              <DashboardButtonTooltip label={t`Add a filter`}>
+              <Tooltip label={t`Add a filter`}>
                 <DashboardHeaderButton
                   key="parameters"
                   onClick={showAddParameterPopover}
@@ -485,7 +485,7 @@ class DashboardHeaderContainer extends Component<DashboardHeaderProps> {
                 >
                   <Icon name="filter" />
                 </DashboardHeaderButton>
-              </DashboardButtonTooltip>
+              </Tooltip>
             </div>
           </TippyPopover>
         </span>,
@@ -495,17 +495,14 @@ class DashboardHeaderContainer extends Component<DashboardHeaderProps> {
         buttons.push(
           <Fragment key="add-action-element">
             <DashboardHeaderActionDivider />
-            <DashboardButtonTooltip
-              key="add-action-button"
-              label={t`Add action button`}
-            >
+            <Tooltip key="add-action-button" label={t`Add action button`}>
               <DashboardHeaderButton
                 onClick={() => this.onAddAction()}
                 aria-label={t`Add action`}
               >
                 <Icon name="click" size={18} />
               </DashboardHeaderButton>
-            </DashboardButtonTooltip>
+            </Tooltip>
           </Fragment>,
         );
       }
@@ -539,7 +536,7 @@ class DashboardHeaderContainer extends Component<DashboardHeaderProps> {
 
     if (!isFullscreen && !isEditing && canEdit) {
       buttons.push(
-        <DashboardButtonTooltip key="edit-dashboard" label={t`Edit dashboard`}>
+        <Tooltip key="edit-dashboard" label={t`Edit dashboard`}>
           <DashboardHeaderButton
             visibleOnSmallScreen={false}
             key="edit"
@@ -547,7 +544,7 @@ class DashboardHeaderContainer extends Component<DashboardHeaderProps> {
             icon="pencil"
             onClick={() => this.handleEdit(dashboard)}
           />
-        </DashboardButtonTooltip>,
+        </Tooltip>,
       );
     }
 
@@ -610,10 +607,7 @@ class DashboardHeaderContainer extends Component<DashboardHeaderProps> {
             onDeleteBookmark={deleteBookmark}
             isBookmarked={isBookmarked}
           />,
-          <DashboardButtonTooltip
-            key="dashboard-info-button"
-            label={t`More info`}
-          >
+          <Tooltip key="dashboard-info-button" label={t`More info`}>
             <DashboardHeaderButton
               icon="info"
               isActive={isShowingDashboardInfoSidebar}
@@ -623,7 +617,7 @@ class DashboardHeaderContainer extends Component<DashboardHeaderProps> {
                   : setSidebar({ name: SIDEBAR_NAME.info })
               }
             />
-          </DashboardButtonTooltip>,
+          </Tooltip>,
         ].filter(Boolean),
       );
 

frontend/src/metabase/dashboard/components/ExtraEditButtonsMenu/ExtraEditButtonsMenu.tsx

@@ -3,9 +3,8 @@ import { t } from "ttag";
 
 import type { Dashboard } from "metabase-types/api";
 
-import { Box, Popover, Icon, Stack, Switch } from "metabase/ui";
+import { Box, Popover, Icon, Tooltip, Stack, Switch } from "metabase/ui";
 import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
-import { DashboardButtonTooltip } from "../DashboardButtonTooltip";
 
 const EXTRA_BUTTONS_DESCRIPTION = t`Toggle width`;
 
@@ -27,11 +26,11 @@ export function ExtraEditButtonsMenu({
     <Popover key={key} shadow="sm" position="bottom-end" offset={5}>
       <Popover.Target>
         <Box>
-          <DashboardButtonTooltip label={EXTRA_BUTTONS_DESCRIPTION}>
+          <Tooltip label={EXTRA_BUTTONS_DESCRIPTION}>
             <DashboardHeaderButton aria-label={EXTRA_BUTTONS_DESCRIPTION}>
               <Icon name="ellipsis" size={18} />
             </DashboardHeaderButton>
-          </DashboardButtonTooltip>
+          </Tooltip>
         </Box>
       </Popover.Target>
       <Popover.Dropdown>

frontend/src/metabase/nav/components/AppBar/AppBarToggle.tsx

@@ -26,7 +26,6 @@ export function AppBarToggle({
     <Tooltip
       label={getSidebarTooltipLabel(isNavBarOpen)}
       disabled={isSmallAppBar}
-      withArrow
       offset={-12}
     >
       <SidebarButton

frontend/src/metabase/ui/components/overlays/Tooltip/Tooltip.styled.tsx

@@ -3,14 +3,21 @@ import type { MantineThemeOverride } from "@mantine/core";
 export const getTooltipOverrides = (): MantineThemeOverride["components"] => ({
   Tooltip: {
     defaultProps: {
+      arrowSize: 10,
+      withArrow: true,
       withinPortal: true,
+      transitionProps: {
+        transition: "fade",
+        duration: 200,
+      },
     },
     styles: theme => ({
       tooltip: {
-        fontSize: theme.fontSizes.md,
-        padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+        backgroundColor: theme.fn.themeColor("bg-black"),
         color: theme.white,
-        backgroundColor: theme.black,
+        fontSize: theme.fontSizes.sm,
+        fontWeight: "bold",
+        padding: "0.6rem 0.75rem",
       },
     }),
   },