@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
114 lines • 4.61 kB
JavaScript
import { Shade, createComponent } from '@furystack/shades';
import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js';
export const Tooltip = Shade({
customElementName: 'shade-tooltip',
css: {
position: 'relative',
fontFamily: cssVariableTheme.typography.fontFamily,
display: 'inline-flex',
'& .tooltip-popup': {
position: 'absolute',
zIndex: cssVariableTheme.zIndex.tooltip,
pointerEvents: 'none',
opacity: '0',
visibility: 'hidden',
transition: buildTransition(['opacity', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default], ['visibility', cssVariableTheme.transitions.duration.fast, cssVariableTheme.transitions.easing.default]),
transitionDelay: '0s',
padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.sm}`,
borderRadius: cssVariableTheme.shape.borderRadius.sm,
backgroundColor: cssVariableTheme.text.primary,
color: cssVariableTheme.background.default,
fontSize: cssVariableTheme.typography.fontSize.xs,
fontFamily: cssVariableTheme.typography.fontFamily,
fontWeight: cssVariableTheme.typography.fontWeight.medium,
lineHeight: cssVariableTheme.typography.lineHeight.tight,
whiteSpace: 'nowrap',
maxWidth: '300px',
boxShadow: cssVariableTheme.shadows.md,
},
'&:hover .tooltip-popup, &:focus-within .tooltip-popup': {
opacity: '1',
visibility: 'visible',
transitionDelay: 'var(--tooltip-delay, 0s)',
},
'&[data-disabled] .tooltip-popup': {
display: 'none',
},
// Placement: top (default)
'&:not([data-placement]) .tooltip-popup, &[data-placement="top"] .tooltip-popup': {
bottom: '100%',
left: '50%',
transform: 'translateX(-50%)',
marginBottom: cssVariableTheme.spacing.xs,
},
// Placement: bottom
'&[data-placement="bottom"] .tooltip-popup': {
top: '100%',
left: '50%',
transform: 'translateX(-50%)',
marginTop: cssVariableTheme.spacing.xs,
},
// Placement: left
'&[data-placement="left"] .tooltip-popup': {
right: '100%',
top: '50%',
transform: 'translateY(-50%)',
marginRight: cssVariableTheme.spacing.xs,
},
// Placement: right
'&[data-placement="right"] .tooltip-popup': {
left: '100%',
top: '50%',
transform: 'translateY(-50%)',
marginLeft: cssVariableTheme.spacing.xs,
},
// Arrow base styles
'& .tooltip-arrow': {
position: 'absolute',
width: '8px',
height: '8px',
backgroundColor: 'inherit',
transform: 'rotate(45deg)',
},
// Arrow: top placement (arrow at bottom of popup)
'&:not([data-placement]) .tooltip-arrow, &[data-placement="top"] .tooltip-arrow': {
bottom: '-4px',
left: '50%',
marginLeft: '-4px',
},
// Arrow: bottom placement (arrow at top of popup)
'&[data-placement="bottom"] .tooltip-arrow': {
top: '-4px',
left: '50%',
marginLeft: '-4px',
},
// Arrow: left placement (arrow at right of popup)
'&[data-placement="left"] .tooltip-arrow': {
right: '-4px',
top: '50%',
marginTop: '-4px',
},
// Arrow: right placement (arrow at left of popup)
'&[data-placement="right"] .tooltip-arrow': {
left: '-4px',
top: '50%',
marginTop: '-4px',
},
},
render: ({ props, children, useHostProps }) => {
const { placement, delay, disabled } = props;
useHostProps({
'data-placement': placement || undefined,
'data-disabled': disabled ? '' : undefined,
style: {
...(delay !== undefined && delay > 0 ? { '--tooltip-delay': `${delay}ms` } : {}),
},
});
return (createComponent(createComponent, null,
children,
createComponent("div", { className: "tooltip-popup", role: "tooltip" },
createComponent("span", { className: "tooltip-arrow" }),
props.title)));
},
});
//# sourceMappingURL=tooltip.js.map