diff --git a/src/components/Tooltip/Tooltip-v2.module.css b/src/components/Tooltip/Tooltip-v2.module.css new file mode 100644 index 000000000..453d21840 --- /dev/null +++ b/src/components/Tooltip/Tooltip-v2.module.css @@ -0,0 +1,109 @@ +/*------------------------------------*\ + # TOOLTIP +\*------------------------------------*/ + +.tooltip { + border-style: solid; + border-width: var(--eds-border-width-sm); + border-radius: calc(var(--eds-theme-border-radius-surfaces-md) * 1px); + box-shadow: var(--eds-box-shadow-md); + max-width: 14rem; + + @media (prefers-reduced-motion) { + transition: none; + } + + border-color: var(--eds-theme-color-background-utility-default-high-emphasis); + color: var(--eds-theme-color-text-utility-inverse); + background-color: var(--eds-theme-color-background-utility-default-high-emphasis); + --arrow-color: var(--eds-theme-color-background-utility-default-high-emphasis); +} + +/** + * Enables opacity fade animation + */ +.tooltip[data-state='hidden'] { + opacity: 0; +} + +/* TODO-AH: consider finding a way to not use these module semantics, e.g., global: */ +.tooltip :global(.tippy-content) { + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 0.5rem; + padding-top: 0.5rem; +} + +/** + * Add arrows + */ +.tooltip :global(.tippy-arrow) { + position: absolute; + + width: 1rem; + height: 1rem; +} + +.tooltip :global(.tippy-arrow::before) { + position: absolute; + + border-style: solid; + border-color: transparent; + border-width: 0.5rem; + + content: ''; +} + +.tooltip[data-placement^='top'] :global(.tippy-arrow) { + left: 0; + + transform: translate3d(73px, 0, 0); +} + +.tooltip[data-placement^='bottom'] :global(.tippy-arrow) { + top: 0; + left: 0; + + transform: translate3d(73px, 0, 0); +} + +.tooltip[data-placement^='left'] :global(.tippy-arrow) { + top: 0; + right: 0; + + transform: translate3d(0, 19px, 0); +} + +.tooltip[data-placement^='right'] :global(.tippy-arrow) { + top: 0; + left: 0; + + transform: translate3d(0, 25px, 0); +} + +.tooltip[data-placement^='top'] :global(.tippy-arrow::before) { + left: 0; + + border-top-color: var(--arrow-color); + border-bottom-width: 0; +} + +.tooltip[data-placement^='bottom'] :global(.tippy-arrow::before) { + left: 0; + + border-bottom-color: var(--arrow-color); + border-top-width: 0; + top: -7px; +} + +.tooltip[data-placement^='left'] :global(.tippy-arrow::before) { + border-left-color: var(--arrow-color); + border-right-width: 0; + right: -7px; +} + +.tooltip[data-placement^='right'] :global(.tippy-arrow::before) { + border-right-color: var(--arrow-color); + border-left-width: 0; + left: -7px; +} diff --git a/src/components/Tooltip/Tooltip-v2.stories.tsx b/src/components/Tooltip/Tooltip-v2.stories.tsx new file mode 100644 index 000000000..28770f6ba --- /dev/null +++ b/src/components/Tooltip/Tooltip-v2.stories.tsx @@ -0,0 +1,123 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; + +import { Tooltip } from './Tooltip-v2'; + +// diminishing the threshold of this component to avoid sub-pixel jittering +// https://www.chromatic.com/docs/threshold +const diffThreshold = 0.75; +const defaultArgs = { + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.', + children: