Как оформить подсказку Material-UI?

Question

Как оформить подсказку Material-UI?

Как я могу стилизовать текст всплывающей подсказки Material-UI? Всплывающая подсказка по умолчанию при наведении указывается черным цветом без переноса текста. Можно ли изменить фон, цвет и т. Д.? Эта опция вообще доступна?

85

reactjs material-ui tooltip formsy-material-ui

Источник

user3108534 21 апр '16 в 04:55

14 ответов

Решение

Принятый ответ на этот вопрос представляется устаревшим (это было для очень ранней версии Material-UI). Ниже я скопировал свой ответ из всплывающей подсказки пользовательского интерфейса материала - Стиль настройки

Ниже приведены примеры того, как переопределить все всплывающие подсказки с помощью темы или просто настроить отдельную подсказку с помощью withStyles. Второй подход также можно использовать для создания настраиваемого компонента всплывающей подсказки, который можно использовать повторно, не заставляя его использовать глобально.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import {
  createMuiTheme,
  MuiThemeProvider,
  withStyles
} from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";

const theme = createMuiTheme({
  overrides: {
    MuiTooltip: {
      tooltip: {
        fontSize: "2em",
        color: "yellow",
        backgroundColor: "red"
      }
    }
  }
});
const styles = {
  tooltip: {
    color: "lightblue",
    backgroundColor: "green"
  }
};

function App(props) {
  return (
    <div className="App">
      <MuiThemeProvider theme={theme}>
        <Tooltip title="This tooltip is customized via overrides in the theme">
          <div>Hover to see tooltip</div>
        </Tooltip>
      </MuiThemeProvider>
      <Tooltip
        classes={props.classes}
        title="This tooltip is customized via withStyles"
      >
        <div>Hover to see tooltip</div>
      </Tooltip>
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

Вот рабочий пример:

Вот документация по CSS-классам всплывающей подсказки, доступная для управления различными аспектами поведения всплывающей подсказки: https://material-ui.com/api/tooltip/

Вот документация по переопределению этих классов в теме: https://material-ui.com/customization/themes/

89

Источник

user7495930 09 фев '19 в 14:06

Обновление MUI v5

Вы можете настроить, переопределив стили в слоте всплывающей подсказки. В v5 есть 3 способа сделать это. Для справки см. Раздел настройкиTooltip. Больше примеров опоры можно увидеть здесь и здесь .

`styled()`

      const ToBeStyledTooltip = ({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ tooltip: className }} />
);
const StyledTooltip = styled(ToBeStyledTooltip)(({ theme }) => ({
  backgroundColor: '#f5f5f9',
  color: 'rgba(0, 0, 0, 0.87)',
  border: '1px solid #dadde9',
}));

`sx` опора

      <Tooltip
  title="Add"
  arrow
  componentsProps={{
    tooltip: {
      sx: {
        bgcolor: 'common.black',
        '& .MuiTooltip-arrow': {
          color: 'common.black',
        },
      },
    },
  }}
>
  <Button>SX</Button>
</Tooltip>

`createTheme` + `ThemeProvider`

      const theme = createTheme({
  components: {
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          backgroundColor: 'pink',
          color: 'red',
          border: '1px solid #dadde9',
        },
      },
    },
  },
});

66

Источник

user9449426 03 ноя '21 в 11:27

Если вы хотите изменить цвет текста, размер шрифта... всплывающей подсказки, есть простой способ.

Вы можете вставить тег в заголовок всплывающей подсказки Martial Ui, например:

<Tooltip title={<span>YourText</span>}>
   <Button>Grow</Button>
</Tooltip>

тогда вы можете стилизовать свой тег как хотите.

проверьте ниже Пример:

16

Источник

user12308440 12 ноя '19 в 11:37

Я тоже столкнулся с этой проблемой и хочу, чтобы любой, кто хотел просто изменить цвет своей всплывающей подсказки, увидел это решение, которое сработало для меня:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

import Tooltip from '@material-ui/core/Tooltip';
import Button from '@material-ui/core/Button';
import DeleteIcon from '@material-ui/icons/Delete';

const useStyles = makeStyles(theme => ({
  customTooltip: {
    // I used the rgba color for the standard "secondary" color
    backgroundColor: 'rgba(220, 0, 78, 0.8)',
  },
  customArrow: {
    color: 'rgba(220, 0, 78, 0.8)',
  },
});

export default TooltipExample = () => {
  const classes = useStyles();

  return (
    <>
      <Tooltip
        classes={{
          tooltip: classes.customTooltip,
          arrow: classes.customArrow
        }}
        title="Delete"
        arrow
      >
        <Button color="secondary"><DeleteIcon /></Button>
      </Tooltip>
    </>
  );
};

13

Источник

user6768111 11 мар '20 в 21:29

Пользовательский компонент MUI v5

Основываясь на ответе NearHuscarl, используя sx, самым простым подходом для меня было создание пользовательского компонента, включающего стиль и любые другие свойства, которые вы хотите повторять в каждой всплывающей подсказке.

Например, компонент может отображать всплывающие подсказки внизу со стрелкой и более крупным шрифтом:

      const StyledTooltip = ({ title, children, ...props }) => (
  <Tooltip
    {...props}
    title={title}
    placement="bottom"
    arrow
    componentsProps={{
      tooltip: {
        sx: {
          fontSize: '1.125rem',
        },
      },
    }}
  >
    {children}
  </Tooltip>
);

const Buttons = () => (
  <div>
    <StyledTooltip title="This is one">
      <Button>One</Button>
    </StyledTooltip>
    <StyledTooltip title="This is two">
      <Button>Two</Button>
    </StyledTooltip>
  </div>
);

3

Источник

user4200446 23 дек '21 в 21:53

Что касается меня, попробовав несколько решений, которые не сработали, я нашел это, и оно работает идеально:

      
    <Tooltip
                open={!!tooltipContent}
                title={tooltipContent}
                onClose={hideTooltip}
                style={{
                  position: "fixed",
                  top: tooltipPosition.top,
                  left: tooltipPosition.left,
                }}
                componentsProps={{
                  tooltip: {
                    sx: {
                      bgcolor: state
                        ? ThemeColors.warning
                        : ThemeColors.warningdark,
                    },
                  },
                }}
              >
....
              </Tooltip>

2

Источник

user13412604 09 авг '23 в 08:27

Другое решение с HtmlTooltip

Я использую HtmlTooltip и добавляю arrow: {color: '#f5f5f9',}, для стиля всплывающей подсказки со стрелкой.

И многое другое о самом стиле всплывающей подсказки.

Поэтому я использую ValueLabelComponent контролировать этикетку и помещать туда Tooltip из MaterialUI.

Надеюсь, что это даст другой способ редактировать всплывающую подсказку MaterialUI:)

const HtmlTooltip = withStyles((theme) => ({
  tooltip: {
    backgroundColor: 'var(--blue)',
    color: 'white',
    maxWidth: 220,
    fontSize: theme.typography.pxToRem(12),
    border: '1px solid #dadde9',
  },
  arrow: {
    color: '#f5f5f9',
  },
}))(Tooltip);

function ValueLabelComponent({ children, open, value }) {
  return (
    <HtmlTooltip arrow open={open} enterTouchDelay={0} placement="top" title={value}>
      {children}
    </HtmlTooltip>
  );
}

...
...

return (
    <div className={classes.root}>
      <Slider
        value={value}
        onChange={handleChange}
        onChangeCommitted={handleChangeCommitted}
        scale={(x) => convertRangeValueToOriginalValue(x, minMaxObj)}
        valueLabelDisplay="auto"
        valueLabelFormat={(x) => '$' + x}
        ValueLabelComponent={ValueLabelComponent}
        aria-labelledby="range-slider"
      />
    </div>
  );

1

Источник

user10869929 04 сен '20 в 22:40

Для меня при использовании v5 иsxопора, это сработало:

      <Tooltip
  slotProps={{
    tooltip: {
      sx:{
        [`&.${tooltipClasses.tooltip}`]: {
          backgroundColor: "red",
          color: "white"
        }
      }
    }
  }}
  arrow
  title="This is a test"
>

С использованиемcomponentPropsпочему-то не работал.slotPropsдал правильный результат.

1

Источник

user9089439 13 июн '23 в 09:22

С помощью styledComponent и MUI V5

      import styled from 'styled-components';
....
....

           <StyledTooltip title={tooltip}>
                  <IconTextStyle>
                    {icon}
                    <Label>{label}</Label>
                  </IconTextStyle>
            </StyledTooltip>

      const StyledTooltip = styled((props) => (
  <Tooltip classes={{ popper: props.className }} {...props} />
))`
  & .MuiTooltip-tooltip {
    display: flex;
    background-color: #191c28;
    border-radius: 4px;
    box-shadow: 0px 0px 24px #00000034;
  }
`;

0

Источник

user4931922 17 май '22 в 11:14

Мы можем настроить стиль всплывающей подсказки следующим образом.

      import CheckCircleIcon from '@material-ui/icons/CheckCircle'
import ErrorIcon from '@material-ui/icons/Error'
import { withStyles } from '@material-ui/core/styles'
import Tooltip from '@material-ui/core/Tooltip'
// import getOr from 'lodash/fp/getOr'
import isEmpty from 'lodash/fp/isEmpty'
import classnames from 'classnames'
import PropTypes from 'prop-types'
import React from 'react'
import styles from './styles'


const Component = ({
    classes,
    value
}) => {
    const LightTooltipSuccess = withStyles(theme => ({
        tooltip: {
            backgroundColor: '#16181a',
            border: '2px solid limegreen',
            borderRadius: '2px',
            fontSize: 12,
            width: '300px'
        },
    }))(Tooltip)

    const LightTooltipFailure = withStyles(theme => ({
        tooltip: {
            backgroundColor: '#16181a',
            border: '2px solid red',
            borderRadius: '2px',
            fontSize: 12,
            width: '300px'
        },
    }))(Tooltip)

    const RenderValidated = isValidated => {
        return isEmpty(isValidated)
            ? <LightTooltipSuccess {...{
                placement: 'top',
                title: 'Success: Request row has been submitted'
            }}>
                <CheckCircleIcon className={classnames(classes.icon, classes.success)}/>
            </LightTooltipSuccess>
            : <LightTooltipFailure {...{
                placement: 'top',
                title: `Error: ${isValidated.join(', ')}` // Error: ${getOr([], isValidated).join(', ')}`
            }}>
                <ErrorIcon className={classes.icon} color='error'/>
            </LightTooltipFailure>
    }

    return RenderValidated(value)
}

Component.displayName = 'ValidatedFramework'
Component.propTypes = {
    classes: PropTypes.shape({
        icon: PropTypes.string.isRequired,
        success: PropTypes.string.isRequired
    }),
    value: PropTypes.arrayOf(PropTypes.string).isRequired
}

export default withStyles(styles)(Component)

0

Источник

user4652706 20 апр '23 в 05:19

я использовал и закончился этим:

      import React from 'react';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import { makeStyles } from '@material-ui/core/styles';

const styles = makeStyles({
    tooltip: {
        backgroundColor: '#FFFFFF',
        color: '#000000',
        border: '.5px solid #999999',
        fontSize: '.85rem',
        fontWeight: '400'
    }
});

const HeaderTooltip = ({ header, tooltip }) =>
    <Grid container direction="row" alignItems="center" spacing={1}>
        <Grid item>
            <Typography variant='h5'>{header}</Typography>
        </Grid>
        <Grid item>
            <Tooltip title={tooltip} classes={{ tooltip: styles().tooltip }}>
                <InfoOutlinedIcon />
            </Tooltip>
        </Grid>
    </Grid>

export default HeaderTooltip;

0

Источник

user12854978 09 окт '21 в 01:26

      "& .MuiTooltip-arrow": {
      color: #f2f2f2,
 }

0

Источник

user12515016 02 дек '23 в 08:54

Я создал пользовательскую подсказку следующим образом

      import React from 'react'
import Tooltip from '@material-ui/core/Tooltip'
import ErrorOutlineOutlinedIcon from '@material-ui/icons/ErrorOutlineOutlined'
import {
    makeStyles,
    createStyles,
    withStyles,
} from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import { Divider, Link, Paper } from '@material-ui/core'


const HtmlTooltip = withStyles(theme => ({
    arrow: {
        '&::before': {
            color: 'white'
        }
    },
    tooltip: {
        backgroundColor: '#f5f5f9',
        boxShadow: theme.shadows[8],
        color: 'rgba(0, 0, 0, 0.87)',
        fontSize: 14,
        maxWidth: 800,
        padding: 0,
    },
    tooltipPlacementTop: {
        margin: '4px 0',
    },
}))(Tooltip)

const imageStyles = { root: { color: 'deeppink', height: 20, marginBottom: 0, width: 20 } }

const Image = withStyles(imageStyles)(({ classes }) => (
    <ErrorOutlineOutlinedIcon classes={classes} />
))

const useStyles = makeStyles(theme =>
    createStyles({
        content: {
            border: `1px solid ${theme.palette.grey[300]}`,
            margin: 0,
            minWidth: 600,
            padding: 0,
            zIndex: 1,
        },
        contentInner: {
            padding: theme.spacing(1)
        },
        header: {
            backgroundColor: 'deeppink',
            fontWeight: 'bold',
            padding: theme.spacing(1),
        }
    })
)

export default function CustomTooltip(params) {
    const classes = useStyles()
    const labelDisplay = params.content
    const textDispaly = params.text
    return (
        <>
            {labelDisplay && labelDisplay.length > 20 ? (<HtmlTooltip arrow interactive title={
                <Paper className={classes.content}>
                    <div className={classes.header}>
                        <Typography color='inherit' variant='body1' style={{color: 'white', fontSize: '20px'}}>
                            {params.title}
                        </Typography>
                    </div>
                    <Divider />
                    <div className={classes.contentInner}>
                        {textDispaly}
                    </div>
                </Paper>}
            placement='top'
            >
                <div style={{ alignItems: 'center', display: 'flex', fontSize: '12px', justifyContent: 'space-between' }}>
                    {labelDisplay}<Image/>
                </div>
            </HtmlTooltip>) : (labelDisplay)}
        </>
    )
}

0

Источник

user4652706 02 сен '22 в 16:14

Другие вопросы по тегам reactjs material-ui tooltip formsy-material-ui

user2679942 21 апр '16 в 13:49 2016-04-21 13:49 · Accepted Answer · 2016-04-21 13:49

Ну, вы можете изменить цвет текста и фона элемента, настраивая тему mui.

color - это цвет текста

rippleBackgroundColor - это всплывающая подсказка

Пример: использование IconButton - но ты мог бы ты Tooltip непосредственно..

import React from 'react';
import IconButton from 'material-ui/IconButton';
import MuiThemeProvider from 'material-ui/lib/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

const muiTheme = getMuiTheme({
  tooltip: {
    color: '#f1f1f1',
    rippleBackgroundColor: 'blue'
  },
});

const Example = () => (
  <div>
    <MuiThemeProvider muiTheme={muiTheme}>
        <IconButton iconClassName="muidocs-icon-custom-github" tooltip="test" />
    </MuiThemeProvider>
  </div>
);

Вы также можете передать style объект для Tooltip (в IconButton его tooltipStyles) - но эти стили будут применяться только для корневого элемента.

Пока невозможно изменить стиль надписи, чтобы она была перенесена на несколько строк.

Как оформить подсказку Material-UI?

14 ответов

styled()

sx опора

createTheme + ThemeProvider

Пользовательский компонент MUI v5

Другое решение с HtmlTooltip

`styled()`

`sx` опора

`createTheme` + `ThemeProvider`