/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/tooltips/VariableWidth.js
41 строка
1 KB
Silviu Alexandru Avram
[docs] Make tooltips describe their visible text triggers (#47658)
13 фев 2026, 12:11
Не верифицирован
13 фев 2026, 12:11
48e7bd8
Код
Авторство
О чём код?
import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; const CustomWidthTooltip = styled(({ className, ...props }) => ( <Tooltip describeChild {...props} classes={{ popper: className }} /> ))({ [`& .${tooltipClasses.tooltip}`]: { maxWidth: 500, }, }); const NoMaxWidthTooltip = styled(({ className, ...props }) => ( <Tooltip describeChild {...props} classes={{ popper: className }} /> ))({ [`& .${tooltipClasses.tooltip}`]: { maxWidth: 'none', }, }); const longText = ` Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus. Praesent non nunc mollis, fermentum neque at, semper arcu. Nullam eget est sed sem iaculis gravida eget vitae justo. `; export default function VariableWidth() { return ( <div> <Tooltip describeChild title={longText}> <Button sx={{ m: 1 }}>Default Width [300px]</Button> </Tooltip> <CustomWidthTooltip title={longText}> <Button sx={{ m: 1 }}>Custom Width [500px]</Button> </CustomWidthTooltip> <NoMaxWidthTooltip title={longText}> <Button sx={{ m: 1 }}>No wrapping</Button> </NoMaxWidthTooltip> </div> ); }