Skip to content

Commit

Permalink
fix(Tooltip): Minor Styling issues (#1650)
Browse files Browse the repository at this point in the history
  • Loading branch information
@imoutaharik
imoutaharik authored Nov 6, 2023
1 parent 5c29eac commit dd5e3bb
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 45 deletions.
86 changes: 44 additions & 42 deletions src/components/Tooltip/Tooltip.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,49 +59,51 @@ const Template: StoryFn<TooltipProps> = (args) => (
const InContextTemplate: StoryFn<TooltipProps> = (args) => {
const [isDialogOpen, setIsDialogOpen] = useToggleOverlay(false);
return (
<InlineDialog open={isDialogOpen}>
<InlineDialog.Trigger>
<Button onClick={() => setIsDialogOpen(!isDialogOpen)}>Hello</Button>
</InlineDialog.Trigger>
<InlineDialog.Content>
<DialogBody>
<Box className="tw-p-4">
<Box className="tw-mb-2">
<Flex justify="start">
<Tooltip {...args}>
<IconIcon24 />
</Tooltip>
<p>Information</p>
</Flex>
</Box>
<Dropdown
enablePortal={false}
onChange={(id) => console.log(id)}
activeItemId="1"
menuBlocks={[
{
id: 'block1',
menuItems: [
{ id: '1', title: 'Item 1' },
{ id: '2', title: 'Item 2' },
{ id: '3', title: 'Item 3' },
{ id: '4', title: 'Item 4' },
{ id: '5', title: 'Item 5' },
],
},
]}
/>
<p className="tw-my-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eveniet harum iste
officia totam unde ut. Aperiam earum laborum nesciunt numquam perferendis ratione, ut.
Asperiores cumque minima nemo officia rerum!
</p>
<Flex justify="center">
<InlineDialog open={isDialogOpen}>
<InlineDialog.Trigger>
<Button onClick={() => setIsDialogOpen(!isDialogOpen)}>Hello</Button>
</InlineDialog.Trigger>
<InlineDialog.Content>
<DialogBody>
<Box className="tw-p-4">
<Box className="tw-mb-2">
<Flex justify="start">
<Tooltip {...args}>
<IconIcon24 />
</Tooltip>
<p>Information</p>
</Flex>
</Box>
<Dropdown
enablePortal={false}
onChange={(id) => console.log(id)}
activeItemId="1"
menuBlocks={[
{
id: 'block1',
menuItems: [
{ id: '1', title: 'Item 1' },
{ id: '2', title: 'Item 2' },
{ id: '3', title: 'Item 3' },
{ id: '4', title: 'Item 4' },
{ id: '5', title: 'Item 5' },
],
},
]}
/>
<p className="tw-my-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eveniet harum
iste officia totam unde ut. Aperiam earum laborum nesciunt numquam perferendis ratione,
ut. Asperiores cumque minima nemo officia rerum!
</p>

<Button onClick={() => setIsDialogOpen(false)}>Close</Button>
</Box>
</DialogBody>
</InlineDialog.Content>
</InlineDialog>
<Button onClick={() => setIsDialogOpen(false)}>Close</Button>
</Box>
</DialogBody>
</InlineDialog.Content>
</InlineDialog>
</Flex>
);
};

Expand Down
27 changes: 24 additions & 3 deletions src/components/Tooltip/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import { Z_INDEX_TOOLTIP } from '@utilities/dialogs/constants';
import { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';
import { useMemoizedId } from '@hooks/useMemoizedId';

const ARROW_DISTANCE_FROM_CORNER_VALUE = 12;
const TOOLTIP_EXTRA_OFFSET_VALUE = 7; // As the arrow is set 12px away from tooltip corner, extra offset should be added to still point to Trigger.

export type TooltipProps = {
id?: string;
children?: ReactElement;
Expand Down Expand Up @@ -50,6 +53,17 @@ const formatTooltipText = (text: string) => {
return text.split(lineBreakRegex).join('\n');
};

const getNewOffsetBasedOnArrowPosition = (currentPlacement: string, offset: [number, number]): [number, number] => {
switch (true) {
case currentPlacement.includes('end'):
return [offset[0] + TOOLTIP_EXTRA_OFFSET_VALUE, offset[1]];
case currentPlacement.includes('start'):
return [offset[0] - TOOLTIP_EXTRA_OFFSET_VALUE, offset[1]];
default:
return offset;
}
};

export const Tooltip = ({
id: customId,
children,
Expand All @@ -75,11 +89,13 @@ export const Tooltip = ({
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
const [tooltipOffset, setTooltipOffset] = useState<[number, number]>(offset);

const { styles, attributes, state } = usePopper(referenceElement, popperElement, {
placement,
modifiers: [
{ name: 'arrow', options: { element: arrowElement } },
{ name: 'offset', options: { offset } },
{ name: 'arrow', options: { element: arrowElement, padding: ARROW_DISTANCE_FROM_CORNER_VALUE } },
{ name: 'offset', options: { offset: tooltipOffset } },
{ name: 'flip', enabled: flip },
],
});
Expand All @@ -88,6 +104,11 @@ export const Tooltip = ({
const arrowStyling = getArrowClasses(currentPlacement);
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

useEffect(() => {
const newOffset = getNewOffsetBasedOnArrowPosition(currentPlacement, offset);
setTooltipOffset(newOffset);
}, [currentPlacement, offset]);

const handleHideTooltip = useCallback(() => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
Expand Down Expand Up @@ -140,7 +161,7 @@ export const Tooltip = ({
aria-hidden={!open}
ref={setPopperElement}
className={merge([
'tw-popper-container tw-inline-block tw-bg-box-neutral-mighty tw-rounded-md tw-shadow-mid tw-text-box-neutral-mighty-inverse tw-border tw-border-line-mighty',
'tw-popper-container tw-inline-block tw-bg-box-neutral-mighty tw-rounded-md tw-shadow tw-text-heading-medium tw-text-box-neutral-mighty-inverse tw-border tw-border-line-mighty',
size === 'spacious' ? 'tw-pt-2 tw-px-3 tw-pb-2.5' : 'tw-pt-1 tw-px-2 tw-pb-1.5',
])}
style={{ ...styles.popper, maxWidth, maxHeight, zIndex }}
Expand Down

0 comments on commit dd5e3bb

Please sign in to comment.