Skip to main content

TooltipBase

Reusable Tooltip component

Example​

import {useRef} from 'react';

import {
  Button,
  createStyles,
  IPlacement,
  IPosition,
  TooltipBase,
  Typography,
  usePopups,
  useStyles,
  View,
} from '@lad-tech/mobydick-core';

export const TooltipWidget = () => {
  const ref = useRef(null);
  const [styles] = useStyles(styleFn);
  const {openPopup} = usePopups();

  return (
    <View style={styles.container}>
      <Typography font={'Regular-Primary-H5'}>Tooltip</Typography>
      <View ref={ref} style={styles.ref}>
        <Typography>Ref component</Typography>
      </View>
      <Button
        text={'Tooltip'}
        onPress={() =>
          openPopup({
            Content: props => (
              <TooltipBase
                position={IPosition.bottom}
                placement={IPlacement.center}
                refCurrent={ref}
                {...props}>
                <TooltipBase.Title title={'Tooltip title'} />
                <TooltipBase.DescriptionText
                  descriptionText={'Tooltip descriptionText'}
                />
                <TooltipBase.Arrow
                  position={IPosition.bottom}
                  placement={IPlacement.center}
                />
              </TooltipBase>
            ),
          })
        }
      />
    </View>
  );
};

const styleFn = createStyles(({spaces, colors}) => ({
  container: {gap: spaces.Space8},
  ref: {
    alignItems: 'center',
    padding: spaces.Space8,
    backgroundColor: colors.BgAccent,
  },
}));

Props​

IPopup Props​

Inherits IPopup Props except 'Content'

Required
onClose​

TYPE
() => void

Function for close tooltip

Required
position​

TYPE
position

Position for tooltip

Required
placement​

TYPE
placement

Placement for tooltip

Required
refCurrent​

TYPE
RefObjectLike

Ref for TouchableOpacity

overlayStyle​

TYPE
ViewStyle

Custom styles for PopupBase

containerStyle​

TYPE
ViewStyle

Custom styles for container tooltip

timeShow​

TYPE
number

Timer for show tooltip

Components​

Title​

See Title

DescriptionText​

See DescriptionText

Arrow​

See Arrow

LeftButton​

See LeftButton