[Tooltip] Component and Hook (#264)

mui · May 29, 2024 · ace9e17 · ace9e17
1 parent ef5d3c6
commit ace9e17
Show file tree

Hide file tree

Showing 73 changed files with 4,389 additions and 26 deletions.
diff --git a/docs/data/base/components/tooltip/UnstyledTooltipDelayGroup.js b/docs/data/base/components/tooltip/UnstyledTooltipDelayGroup.js
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import * as Tooltip from '@base_ui/react/Tooltip';
+import { styled } from '@mui/system';
+
+export default function UnstyledTooltipDelayGroup() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Tooltip.Provider delay={500} closeDelay={500}>
+        <Tooltip.Root>
+          <AnchorButton>Anchor A</AnchorButton>
+          <Tooltip.Positioner sideOffset={5}>
+            <TooltipPopup>Tooltip A</TooltipPopup>
+          </Tooltip.Positioner>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <AnchorButton>Anchor B</AnchorButton>
+          <Tooltip.Positioner sideOffset={5}>
+            <TooltipPopup>Tooltip B</TooltipPopup>
+          </Tooltip.Positioner>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const TooltipPopup = styled(Tooltip.Popup)`
+  ${({ theme }) => `
+    background: ${theme.palette.mode === 'dark' ? 'white' : 'black'};
+    color: ${theme.palette.mode === 'dark' ? 'black' : 'white'};
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 95%;
+    cursor: default;
+  `}
+`;
+
+export const AnchorButton = styled(Tooltip.Trigger)`
+  border: none;
+  background: ${blue[600]};
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &[data-state='open'] {
+    background: ${blue[800]};
+  }
+`;
diff --git a/docs/data/base/components/tooltip/UnstyledTooltipDelayGroup.tsx b/docs/data/base/components/tooltip/UnstyledTooltipDelayGroup.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import * as Tooltip from '@base_ui/react/Tooltip';
+import { styled } from '@mui/system';
+
+export default function UnstyledTooltipDelayGroup() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Tooltip.Provider delay={500} closeDelay={500}>
+        <Tooltip.Root>
+          <AnchorButton>Anchor A</AnchorButton>
+          <Tooltip.Positioner sideOffset={5}>
+            <TooltipPopup>Tooltip A</TooltipPopup>
+          </Tooltip.Positioner>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <AnchorButton>Anchor B</AnchorButton>
+          <Tooltip.Positioner sideOffset={5}>
+            <TooltipPopup>Tooltip B</TooltipPopup>
+          </Tooltip.Positioner>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const TooltipPopup = styled(Tooltip.Popup)`
+  ${({ theme }) => `
+    background: ${theme.palette.mode === 'dark' ? 'white' : 'black'};
+    color: ${theme.palette.mode === 'dark' ? 'black' : 'white'};
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 95%;
+    cursor: default;
+  `}
+`;
+
+export const AnchorButton = styled(Tooltip.Trigger)`
+  border: none;
+  background: ${blue[600]};
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &[data-state='open'] {
+    background: ${blue[800]};
+  }
+`;
diff --git a/docs/data/base/components/tooltip/UnstyledTooltipDelayGroup.tsx.preview b/docs/data/base/components/tooltip/UnstyledTooltipDelayGroup.tsx.preview
@@ -0,0 +1,14 @@
+<Tooltip.Provider delay={500} closeDelay={500}>
+  <Tooltip.Root>
+    <AnchorButton>Anchor A</AnchorButton>
+    <Tooltip.Positioner sideOffset={5}>
+      <TooltipPopup>Tooltip A</TooltipPopup>
+    </Tooltip.Positioner>
+  </Tooltip.Root>
+  <Tooltip.Root>
+    <AnchorButton>Anchor B</AnchorButton>
+    <Tooltip.Positioner sideOffset={5}>
+      <TooltipPopup>Tooltip B</TooltipPopup>
+    </Tooltip.Positioner>
+  </Tooltip.Root>
+</Tooltip.Provider>
diff --git a/docs/data/base/components/tooltip/UnstyledTooltipFollowCursor.js b/docs/data/base/components/tooltip/UnstyledTooltipFollowCursor.js
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as Tooltip from '@base_ui/react/Tooltip';
+import { styled } from '@mui/system';
+
+export default function UnstyledTooltipFollowCursor() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Tooltip.Root followCursorAxis="both">
+        <AnchorButton>Anchor</AnchorButton>
+        <Tooltip.Positioner sideOffset={5}>
+          <TooltipPopup>Tooltip</TooltipPopup>
+        </Tooltip.Positioner>
+      </Tooltip.Root>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const TooltipPopup = styled(Tooltip.Popup)`
+  ${({ theme }) => `
+    background: ${theme.palette.mode === 'dark' ? 'white' : 'black'};
+    color: ${theme.palette.mode === 'dark' ? 'black' : 'white'};
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 95%;
+    cursor: default;
+  `}
+`;
+
+export const AnchorButton = styled(Tooltip.Trigger)`
+  border: none;
+  background: ${blue[600]};
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &[data-state='open'] {
+    background: ${blue[800]};
+  }
+`;
diff --git a/docs/data/base/components/tooltip/UnstyledTooltipFollowCursor.tsx b/docs/data/base/components/tooltip/UnstyledTooltipFollowCursor.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as Tooltip from '@base_ui/react/Tooltip';
+import { styled } from '@mui/system';
+
+export default function UnstyledTooltipFollowCursor() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Tooltip.Root followCursorAxis="both">
+        <AnchorButton>Anchor</AnchorButton>
+        <Tooltip.Positioner sideOffset={5}>
+          <TooltipPopup>Tooltip</TooltipPopup>
+        </Tooltip.Positioner>
+      </Tooltip.Root>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const TooltipPopup = styled(Tooltip.Popup)`
+  ${({ theme }) => `
+    background: ${theme.palette.mode === 'dark' ? 'white' : 'black'};
+    color: ${theme.palette.mode === 'dark' ? 'black' : 'white'};
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 95%;
+    cursor: default;
+  `}
+`;
+
+export const AnchorButton = styled(Tooltip.Trigger)`
+  border: none;
+  background: ${blue[600]};
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &[data-state='open'] {
+    background: ${blue[800]};
+  }
+`;
diff --git a/docs/data/base/components/tooltip/UnstyledTooltipFollowCursor.tsx.preview b/docs/data/base/components/tooltip/UnstyledTooltipFollowCursor.tsx.preview
@@ -0,0 +1,6 @@
+<Tooltip.Root followCursorAxis="both">
+  <AnchorButton>Anchor</AnchorButton>
+  <Tooltip.Positioner sideOffset={5}>
+    <TooltipPopup>Tooltip</TooltipPopup>
+  </Tooltip.Positioner>
+</Tooltip.Root>
diff --git a/docs/data/base/components/tooltip/UnstyledTooltipIntroduction/system/index.js b/docs/data/base/components/tooltip/UnstyledTooltipIntroduction/system/index.js
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import * as Tooltip from '@base_ui/react/Tooltip';
+import { styled } from '@mui/system';
+
+export default function UnstyledTooltipIntroduction() {
+  return (
+    <div style={{ display: 'flex', gap: 10 }}>
+      <Tooltip.Provider closeDelay={100}>
+        <Tooltip.Root>
+          <AnchorButton aria-label="bold">B</AnchorButton>
+          <Tooltip.Positioner sideOffset={7}>
+            <TooltipPopup>
+              Bold
+              <TooltipArrow />
+            </TooltipPopup>
+          </Tooltip.Positioner>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <AnchorButton aria-label="italic">I</AnchorButton>
+          <Tooltip.Positioner sideOffset={7}>
+            <TooltipPopup>
+              Italic
+              <TooltipArrow />
+            </TooltipPopup>
+          </Tooltip.Positioner>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <AnchorButton aria-label="underline">U</AnchorButton>
+          <Tooltip.Positioner sideOffset={7}>
+            <TooltipPopup>
+              Underline
+              <TooltipArrow />
+            </TooltipPopup>
+          </Tooltip.Positioner>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+export const TooltipPopup = styled(Tooltip.Popup)`
+  ${({ theme }) => `
+    background: ${theme.palette.mode === 'dark' ? 'white' : 'black'};
+    color: ${theme.palette.mode === 'dark' ? 'black' : 'white'};
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 95%;
+    cursor: default;
+  `}
+`;
+
+export const AnchorButton = styled(Tooltip.Trigger)`
+  border: none;
+  background: ${blue[600]};
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+
+  &:focus-visible {
+    outline: 2px solid ${blue[400]};
+    outline-offset: 2px;
+  }
+
+  &:hover,
+  &[data-state='open'] {
+    background: ${blue[800]};
+  }
+
+  &[aria-label='bold'] {
+    font-weight: bold;
+  }
+
+  &[aria-label='italic'] {
+    font-style: italic;
+  }
+
+  &[aria-label='underline'] {
+    text-decoration: underline;
+  }
+`;
+
+export const TooltipArrow = styled(Tooltip.Arrow)`
+  ${({ theme }) => `
+    width: 10px;
+    height: 10px;
+    transform: rotate(45deg);
+    background: ${theme.palette.mode === 'dark' ? 'white' : 'black'};
+    z-index: -1;
+
+    &[data-side='top'] {
+      bottom: -5px;
+    }
+    &[data-side='right'] {
+      left: -5px;
+    }
+    &[data-side='bottom'] {
+      top: -5px;
+    }
+    &[data-side='left'] {
+      right: -5px;
+    }
+  `}
+`;