Skip to main content

Arrow

Reusable Arrow component for Tooltip

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.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

Required
position

TYPE
position

Position for arrow

Required
placement

TYPE
placement

Placement for arrow

arrowViewStyles

TYPE
ViewStyle

Custom styles for container