agrp.dev logo
Components
BadgeButtonCheckboxCollapseDatePickerIconIndicatorInputMessageNotificationPaginationProgressRadioSelectSkeletonSwitchTabsTextAreaTimelineTooltipsTooltip usageDifferent positionsTooltips provider propsTypography

Tooltips

Is a component that displays a tooltip when the user hovers over an element.

Tooltip usage

Predisposition

Before usage, you need to wrap your App in Tooltips provider

import { Tooltips } from '@atlasgroup/react-atlantic';


// App.tsx
export const App = () => (
    <OtherProvider>
        <Tooltips>// Your app</Tooltips>
    </OtherProvider>
);

Then you are set to go for specific tooltip usage

import { useTooltip, Text } from '@atlasgroup/react-atlantic';


export const Component = () => {
    const tooltip = useTooltip();
    return (
        <Text ref={tooltip} data-title="Text to display" data-position="left">
            Czech Republic🇨🇿
        </Text>
    );
};

Different positions

Tooltips provider props

hideTooltips

You can hide the tooltips globally by passing hideTooltip prop to Tooltips provider

<Tooltips hideTooltips={true}>{/*Component*/}</Tooltips>

contentAttr

You can also pass contentAttr & positionAttr props to the Tooltips provider to change the content and position attribute of tooltips respectivelly

<Tooltips contentAttr="data-content" positionAttr="data-place">
    {/*Component*/}
</Tooltips>

Tooltip

Last but not least, you can pass Tooltip prop to the Tooltips provider to change the component used for tooltips

const StyledTooltip = styled.div`
    color: red;
`;


<Tooltips Tooltip={StyledTooltip}>{/*Component*/}</Tooltips>;