@wonderflow/react-components/dist/components/tooltip/tooltip.module.css

UI components from Wonderflow's Wanda design system

@layer components{.Tooltip{display:contents}.Balloon{word-wrap:break-word;background-color:#31363f;border-radius:.25rem;max-inline-size:var(--max-w);padding:.5rem 1rem;position:relative;z-index:5}.Balloon,.Balloon p{font-size:.875rem}.Balloon[data-popper-reference-hidden=true]{pointer-events:none;visibility:hidden}.Arrow:before{background-color:#31363f;block-size:12px;content:"";inline-size:12px;position:absolute;transform:rotate(45deg);visibility:visible}.Balloon[data-popper-reference-hidden=true] .Arrow{pointer-events:none;visibility:hidden}.Balloon[data-popper-placement^=top] .Arrow{bottom:6px}.Balloon[data-popper-placement^=top] .Arrow:before{transform:translateX(-50%) translateY(0) rotate(45deg)}.Balloon[data-popper-placement^=left] .Arrow{right:6px}.Balloon[data-popper-placement^=left] .Arrow:before{transform:translateX(-2px) translateY(-50%) rotate(45deg)}.Balloon[data-popper-placement^=bottom] .Arrow{top:-6px}.Balloon[data-popper-placement^=bottom] .Arrow:before{transform:translateX(-50%) translateY(2px) rotate(45deg)}.Balloon[data-popper-placement^=right] .Arrow{left:-6px}.Balloon[data-popper-placement^=right] .Arrow:before{transform:translateX(1px) translateY(-50%) rotate(45deg)}}