@chakra-ui/react/dist/esm/theme/recipes/tooltip.js

Responsive and accessible React UI components built with React and Emotion

"use strict";
import { defineSlotRecipe } from '../../styled-system/config.js';
import { tooltipAnatomy } from '@ark-ui/react/tooltip';

const tooltipSlotRecipe = defineSlotRecipe({
  slots: tooltipAnatomy.keys(),
  className: "chakra-tooltip",
  base: {
    content: {
      "--tooltip-bg": "colors.bg.inverted",
      bg: "var(--tooltip-bg)",
      color: "fg.inverted",
      px: "2.5",
      py: "1",
      borderRadius: "l2",
      fontWeight: "medium",
      textStyle: "xs",
      boxShadow: "md",
      maxW: "xs",
      zIndex: "tooltip",
      transformOrigin: "var(--transform-origin)",
      _open: {
        animationStyle: "scale-fade-in",
        animationDuration: "fast"
      },
      _closed: {
        animationStyle: "scale-fade-out",
        animationDuration: "fast"
      }
    },
    arrow: {
      "--arrow-size": "sizes.2",
      "--arrow-background": "var(--tooltip-bg)"
    },
    arrowTip: {
      borderTopWidth: "1px",
      borderInlineStartWidth: "1px",
      borderColor: "var(--tooltip-bg)"
    }
  }
});

export { tooltipSlotRecipe };