Popover Tip Addition

[kaufmann42]

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.

• 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

[oliviertassinari]

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

[kaufmann42]

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.

[tjefferson08]

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.

[oliviertassinari]

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

• tooltip: https://material-ui.netlify.com/demos/tooltips/#customized-tooltips
• popper: https://material-ui.netlify.com/utils/popper/#scroll-playground

[tjefferson08]

Annnnd I totally missed that. Reinventing the wheel darn it! Thanks for the links

[oliviertassinari]

@tjefferson08 It's not released yet.