lilith/ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui-feedback): ✨ Add customizable animations and accessibility enhancements to the Tooltip component

Browse source 
Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
TransQuinnFTW 2026-04-04 21:07:11 -07:00
parent cf323f3c65
commit afe759dc81
1 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/ui-feedback/src/Tooltip.tsx
View file

@ -44,14 +44,17 @@ const TooltipContent = styled.div<{
}>`
position: fixed;
z-index: ${(props) => (props.theme as ThemeInterface).zIndex?.tooltip || 9999};
background: ${(props) => (props.theme as ThemeInterface).colors.surface};
color: ${(props) => (props.theme as ThemeInterface).colors.text.primary};
background: ${(props) => (props.theme as ThemeInterface).colors.surface}E6;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: ${(props) => (props.theme as ThemeInterface).colors.text.secondary};
padding: ${(props) => (props.theme as ThemeInterface).spacing.xs}
${(props) => (props.theme as ThemeInterface).spacing.sm};
border-radius: ${(props) => (props.theme as ThemeInterface).borderRadius.sm};
box-shadow: ${(props) => (props.theme as ThemeInterface).shadows.md};
font-size: ${(props) => (props.theme as ThemeInterface).typography.fontSize.sm};
border-radius: ${(props) => (props.theme as ThemeInterface).borderRadius.md};
box-shadow: ${(props) => (props.theme as ThemeInterface).shadows.sm};
font-size: ${(props) => (props.theme as ThemeInterface).typography.fontSize.xs};
font-family: ${(props) => (props.theme as ThemeInterface).typography.fontFamily.body};
letter-spacing: 0.02em;
max-width: 300px;
opacity: ${(props) => (props.$isVisible ? 1 : 0)};
pointer-events: ${(props) => (props.$isVisible ? 'auto' : 'none')};
@ -118,34 +121,34 @@ const TooltipArrow = styled.div<{
switch (props.$position) {
case 'top':
return css`
bottom: -6px;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
border-width: 6px 6px 0 6px;
border-width: 4px 4px 0 4px;
border-color: ${borderColor} transparent transparent transparent;
`;
case 'bottom':
return css`
top: -6px;
top: -4px;
left: 50%;
transform: translateX(-50%);
border-width: 0 6px 6px 6px;
border-width: 0 4px 4px 4px;
border-color: transparent transparent ${borderColor} transparent;
`;
case 'left':
return css`
right: -6px;
right: -4px;
top: 50%;
transform: translateY(-50%);
border-width: 6px 0 6px 6px;
border-width: 4px 0 4px 4px;
border-color: transparent transparent transparent ${borderColor};
`;
case 'right':
return css`
left: -6px;
left: -4px;
top: 50%;
transform: translateY(-50%);
border-width: 6px 6px 6px 0;
border-width: 4px 4px 4px 0;
border-color: transparent ${borderColor} transparent transparent;
`;
}