mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-16 21:44:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(about): Use button component

Browse Source 
- tooltip accessibility improvements
This commit is contained in:
alexsparkes
2024-05-20 09:15:50 +01:00
parent 895f61bd70
commit 0a94a27f4e
6 changed files with 136 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Elements/Tooltip/Tooltip.jsx
View File

@@ -1,10 +1,11 @@
import { useState, memo } from 'react';
import { useState, memo, useRef } from 'react';
import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
import './tooltip.scss';
function Tooltip({ children, title, style, placement, subtitle }) {
const [showTooltip, setShowTooltip] = useState(false);
const [reference, setReference] = useState(null);
const tooltipId = useRef(`tooltip-${Math.random()}`);
const { x, y, refs, strategy } = useFloating({
placement: placement || 'bottom',
@@ -24,6 +25,7 @@ function Tooltip({ children, title, style, placement, subtitle }) {
onFocus={() => setShowTooltip(true)}
onBlur={() => setShowTooltip(false)}
ref={setReference}
aria-describedby={tooltipId.current}
>
{children}
</div>

28
src/components/Elements/Tooltip/tooltip.scss
View File

@@ -96,3 +96,31 @@
}
}
}
#floating {
transition-property: opacity, transform;
}
#floating[data-status='open'],
#floating[data-status='close'] {
transition-duration: 250ms;
}
#floating[data-status='initial'],
#floating[data-status='close'] {
opacity: 0;
}
#floating[data-status='initial'][data-placement^='top'],
#floating[data-status='close'][data-placement^='top'] {
transform: translateY(5px);
}
#floating[data-status='initial'][data-placement^='bottom'],
#floating[data-status='close'][data-placement^='bottom'] {
transform: translateY(-5px);
}
#floating[data-status='initial'][data-placement^='left'],
#floating[data-status='close'][data-placement^='left'] {
transform: translateX(5px);
}
#floating[data-status='initial'][data-placement^='right'],
#floating[data-status='close'][data-placement^='right'] {
transform: translateX(-5px);
}