@workday/canvas-kit-react/dist/es6/tooltip/lib/TooltipContainer.js

The parent module that contains all Workday Canvas Kit React components

import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { borderRadius, colors, space, type } from '@workday/canvas-kit-react/tokens';
import { getTranslateFromOrigin } from '@workday/canvas-kit-react/common';
import { px2rem } from '@workday/canvas-kit-styling';
const tooltipAnimation = (transformOrigin) => {
    const translate = getTranslateFromOrigin(transformOrigin, space.xxxs);
    return keyframes `
    0% {
      opacity: 0;
      transform: translate(${translate.x}px, ${translate.y}px);
    }
    100% {
      opacity: 1;
      transform: translate(0);
    }
  `;
};
const defaultTransformOrigin = {
    vertical: 'bottom',
    horizontal: 'center',
};
export const TooltipContainer = styled('div')({
    ...type.levels.subtext.medium,
    display: 'inline-flex',
    position: 'relative',
    padding: space.xs,
    color: colors.frenchVanilla100,
    a: {
        color: colors.frenchVanilla100,
        textDecoration: 'underline',
    },
    // use :before vs margin to increase the tooltip hit-box
    ':before': {
        content: '""',
        borderRadius: borderRadius.m,
        outline: `${px2rem(1)} solid transparent`,
        outlineOffset: `-${px2rem(1)}`,
        zIndex: -1,
        margin: space.xxxs,
        backgroundColor: 'rgba(0,0,0,.85)',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    // offset tooltips by 2 pixels when a keyboard focus ring is detected
    '[data-whatinput=keyboard] &': {
        padding: `calc(${space.s} - 0.125rem)`,
        ':before': {
            margin: `calc(${space.xxxs} + 0.125rem)`,
        },
    },
    // Hide tooltip when the reference element is either clipped or fully hidden
    '[data-popper-reference-hidden] &': {
        visibility: 'hidden',
        pointerEvents: 'none',
    },
    // Fix offsets based on placement
    '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
        left: `-${space.xxxs}`,
    },
    '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
        right: `-${space.xxxs}`,
    },
    '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
        top: `-${space.xxxs}`,
    },
    '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
        bottom: `-${space.xxxs}`,
    },
}, ({ transformOrigin = defaultTransformOrigin }) => {
    if (transformOrigin === null) {
        return {};
    }
    return {
        animation: tooltipAnimation(transformOrigin),
        animationDuration: '150ms',
        animationTimingFunction: 'ease-out',
        transformOrigin: transformOrigin
            ? `${transformOrigin.vertical} ${transformOrigin.horizontal}`
            : 'top center',
    };
});