DApp-1551 blocks/Tooltip

package.json

@@ -37,6 +37,7 @@
     "@pushprotocol/restapi": "1.7.20",
     "@pushprotocol/socket": "0.5.3",
     "@pushprotocol/uiweb": "1.4.0",
+    "@radix-ui/react-tooltip": "^1.1.1",
     "@reduxjs/toolkit": "^1.7.1",
     "@tanstack/react-query": "^5.44.0",
     "@tanstack/react-query-devtools": "^5.44.0",

src/blocks/index.ts

@@ -5,6 +5,7 @@ export { Link, type LinkProps } from './link';
 export { Separator, type SeparatorProps } from './separator';
 export { Skeleton, type SkeletonProps } from './skeleton';
 export { Text, type TextProps } from './text';
+export { Tooltip, type TooltipProps } from './tooltip';
 
 export * from './Blocks.colors';
 export * from './Blocks.constants';

src/blocks/tooltip/Tooltip.constants.ts

@@ -0,0 +1,10 @@
+import type { TooltipProps } from './Tooltip.types';
+
+export const tooltipCSSPropsKeys: (keyof TooltipProps)[] = [
+  'height',
+  'maxHeight',
+  'minHeight',
+  'maxWidth',
+  'minWidth',
+  'width',
+];

src/blocks/tooltip/Tooltip.tsx

@@ -0,0 +1,105 @@
+import { type FC, useRef, useState } from 'react';
+import styled from 'styled-components';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import type { TooltipProps } from './Tooltip.types';
+import { getTooltipPositionalCSS, getTooltipResponsiveCSS } from './Tooltip.utils';
+import { getBlocksColor } from 'blocks/Blocks.utils';
+import { tooltipCSSPropsKeys } from './Tooltip.constants';
+import { useIsVisible } from 'common';
+
+const RadixTooltipContent = styled(RadixTooltip.Content).withConfig({
+  shouldForwardProp: (prop) => !tooltipCSSPropsKeys.includes(prop as keyof TooltipProps),
+})<TooltipProps>`
+  /* Tooltip responsive styles */
+  ${(props) => getTooltipResponsiveCSS(props)}
+
+  /* Tooltip default styles */
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 12px;
+  background-color: ${getBlocksColor('light', 'black')};
+
+  ${(props) => props.css || ''};
+`;
+
+const TooltipTitle = styled.div`
+  color: ${getBlocksColor('light', 'white')};
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%;
+`;
+
+const TooltipDescription = styled.div`
+  color: ${getBlocksColor('light', 'gray-400')};
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+const Tooltip: FC<TooltipProps> = ({
+  width = 'max-content',
+  maxWidth = '171px',
+  trigger = 'hover',
+  tooltipPosition = 'bottom-right',
+  children,
+  description,
+  title,
+  overlay,
+  ...props
+}) => {
+  const [visible, setVisible] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const isInView = useIsVisible(triggerRef);
+
+  const { style, ...cssProps } = getTooltipPositionalCSS(tooltipPosition);
+  const triggerArray = typeof trigger === 'string' ? [trigger] : trigger;
+
+  const showTooltip = () => setVisible(true);
+  const hideTooltip = () => setVisible(false);
+
+  return (
+    <RadixTooltip.Provider>
+      <RadixTooltip.Root
+        delayDuration={250}
+        open={visible && isInView}
+      >
+        <RadixTooltip.Trigger
+          asChild
+          ref={triggerRef}
+          onMouseEnter={() => triggerArray.includes('hover') && showTooltip()}
+          onMouseLeave={() => triggerArray.includes('hover') && hideTooltip()}
+          onFocus={showTooltip}
+          onBlur={hideTooltip}
+          /* Makes the element focusable to support focus related functions on mobile devices */
+          tabIndex={0}
+        >
+          {children}
+        </RadixTooltip.Trigger>
+        <RadixTooltip.Portal>
+          <RadixTooltipContent
+            {...{ style, width, maxWidth }}
+            {...cssProps}
+            {...props}
+          >
+            {overlay ? (
+              overlay
+            ) : (
+              <>
+                {title && <TooltipTitle>{title}</TooltipTitle>}
+                {description && <TooltipDescription>{description}</TooltipDescription>}
+              </>
+            )}
+          </RadixTooltipContent>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+  );
+};
+
+Tooltip.displayName = 'Tooltip';
+
+export { Tooltip };

src/blocks/tooltip/Tooltip.types.ts

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+
+import type { ResponsiveProp, SpaceType, ValueOf } from '../Blocks.types';
+import type { FlattenSimpleInterpolation } from 'styled-components';
+import type { TooltipContentProps } from '@radix-ui/react-tooltip';
+
+export type TooltipResponsiveProps = {
+  /* Sets height css property */
+  height?: ResponsiveProp<string>;
+  /* Sets margin css property */
+  margin?: ResponsiveProp<SpaceType>;
+  /* Sets max-height css property */
+  maxHeight?: ResponsiveProp<string>;
+  /* Sets min-height css property */
+  minHeight?: ResponsiveProp<string>;
+  /* Sets max-width css property */
+  maxWidth?: ResponsiveProp<string>;
+  /* Sets min-width css property */
+  minWidth?: ResponsiveProp<string>;
+  /* Sets width css property */
+  width?: ResponsiveProp<string>;
+};
+
+export type TooltipPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+export type TooltipTrigger = 'hover' | 'click';
+
+export type TooltipComponentProps = {
+  /* Additional prop from styled components to apply custom css to Tooltip */
+  css?: FlattenSimpleInterpolation;
+  /* Child react nodes rendered by Tooltip */
+  children?: ReactNode;
+  /* Overlay content component of the Tooltip */
+  overlay?: ReactNode;
+  /* Title of the Tooltip */
+  title?: string;
+  /* Description to be displayed in the tooltip */
+  description?: string;
+  /* Position of the Tooltip */
+  tooltipPosition?: TooltipPosition;
+  /* Boolean value indicating whether Tooltip is visible */
+  visible?: boolean;
+};
+
+export type TooltipContainerProps = {
+  /* Trigger for the Tooltip to open */
+  trigger?: TooltipTrigger | Array<TooltipTrigger>;
+};
+
+export type TooltipProps = TooltipResponsiveProps & TooltipComponentProps & TooltipContainerProps & TooltipContentProps;
+
+export type TooltipResponsiveCSSProperties =
+  | 'height'
+  | 'max-height'
+  | 'min-height'
+  | 'max-width'
+  | 'min-width'
+  | 'width';
+
+export type TooltipResponsivePropValues = ValueOf<TooltipResponsiveProps>;
+
+export type TooltipResponsiveCSSPropertiesData = {
+  propName: TooltipResponsiveCSSProperties;
+  prop: TooltipResponsivePropValues;
+};

src/blocks/tooltip/Tooltip.utils.ts

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react';
+import { getResponsiveCSS } from '../Blocks.utils';
+import type { TooltipResponsiveCSSPropertiesData, TooltipResponsiveProps, TooltipPosition } from './Tooltip.types';
+import { Align, Side } from '@radix-ui/react-popper';
+
+const getTooltipResponsiveCSSProperties = (props: TooltipResponsiveProps): TooltipResponsiveCSSPropertiesData[] => [
+  { propName: 'height', prop: props.height },
+  { propName: 'max-height', prop: props.maxHeight },
+  { propName: 'min-height', prop: props.minHeight },
+  { propName: 'max-width', prop: props.maxWidth },
+  { propName: 'min-width', prop: props.minWidth },
+  { propName: 'width', prop: props.width },
+];
+
+export const getTooltipResponsiveCSS = (props: TooltipResponsiveProps) => {
+  const data = getTooltipResponsiveCSSProperties(props);
+  return getResponsiveCSS(data);
+};
+
+export const getTooltipPositionalCSS = (tooltipPosition: TooltipPosition) => {
+  let style: { align: Align; side: Side; style: CSSProperties } = {
+    align: 'start',
+    side: 'top',
+    style: {
+      borderBottomLeftRadius: 4,
+    },
+  };
+
+  switch (tooltipPosition) {
+    case 'bottom-left':
+      style = {
+        align: 'end',
+        side: 'bottom',
+        style: {
+          borderTopRightRadius: 4,
+        },
+      };
+      break;
+    case 'top-left':
+      style = {
+        align: 'end',
+        side: 'top',
+        style: {
+          borderBottomRightRadius: 4,
+        },
+      };
+      break;
+    case 'bottom-right':
+      style = {
+        align: 'start',
+        side: 'bottom',
+        style: {
+          borderTopLeftRadius: 4,
+        },
+      };
+      break;
+  }
+
+  return style;
+};

src/blocks/tooltip/index.ts

@@ -0,0 +1,4 @@
+export * from './Tooltip';
+export * from './Tooltip.types';
+export * from './Tooltip.utils';
+export * from './Tooltip.constants';

src/common/hooks/index.ts

@@ -1 +1,2 @@
 export { useSmoothHorizontalScroll } from './useSmoothHorizontalScroll';
+export { useIsVisible } from './useIsVisible';

src/common/hooks/useIsVisible.ts

@@ -0,0 +1,17 @@
+import { RefObject, useEffect, useMemo, useState } from 'react';
+
+export const useIsVisible = (ref: RefObject<HTMLElement>) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const observer = useMemo(() => new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting)), [ref]);
+
+  useEffect(() => {
+    if (ref.current) observer.observe(ref.current);
+
+    return () => {
+      if (ref.current) observer.unobserve(ref.current);
+    };
+  }, []);
+
+  return isVisible;
+};