Material-ui: Popover Tip Addition

Created on 23 Mar 2018 · 6Comments · Source: mui-org/material-ui

Anyone have any idea of the best way to go about changing the look of the popover to include a small triangle up top (making it look more like a tooltip). Any help advice would be appreciated.

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Context

For the project I'm working on the generally accepted components by users usually contain a "tooltipish" tip on the top of the box. We think it's a little abrupt (and menu like) for our needs to leave out this indicator.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | ^1.0.0-beta.38 |
| React | ^16.2.0 |

Popover Tooltip docs

Source

kaufmann42

👍13 👎1

Most helpful comment

I got this working by providing a theme with an override set on the tooltip component.

Something like:

const theme = createMuiTheme({
  overrides: {
    MuiTooltip: {
      tooltip: {
        '&:before': {
          /* tricky doubly-quoted empty string so mui parses it as truly empty */
          content: '""',
          display: 'block',
          width: '0',
          height: '0',
          position: 'absolute',
          borderLeft: '10px solid transparent',
          borderRight: '10px solid transparent',
          /* border color should probably match whatever your tooltip color is */
          borderTop: '10px solid #000',
          left: 'calc(50% - 10px)',
          top: '100%'
        }
      }
    }
})

It's a downward triangle but you get the idear.

tjefferson08 on 11 Jul 2018

👍2

All 6 comments

@kaufmann42 It's a good question. I would love to have a demo in the documentation demonstrating it.

oliviertassinari on 23 Mar 2018

I'll definitely be working on it and I'll post it here once I get it working. Maybe hopefully get some feedback on how I went about it :)

p.s. Sorry there was something you didn't enjoy about this issue creation @manAbl - feel free to let me know what it was so I can avoid it for next time/fix it.

kaufmann42 on 25 Mar 2018

I got this working by providing a theme with an override set on the tooltip component.

Something like:

const theme = createMuiTheme({
  overrides: {
    MuiTooltip: {
      tooltip: {
        '&:before': {
          /* tricky doubly-quoted empty string so mui parses it as truly empty */
          content: '""',
          display: 'block',
          width: '0',
          height: '0',
          position: 'absolute',
          borderLeft: '10px solid transparent',
          borderRight: '10px solid transparent',
          /* border color should probably match whatever your tooltip color is */
          borderTop: '10px solid #000',
          left: 'calc(50% - 10px)',
          top: '100%'
        }
      }
    }
})

It's a downward triangle but you get the idear.

tjefferson08 on 11 Jul 2018

👍2

Oh, my bad. I have forgotten, it was fixed in #12085.