Change Style(color) of Tip

[GarrettHartley]

Could you add a style prop or something to allow for changing the style(color) of the tip?

[matmalkowski]

@GarrettHartley I found a way of doing it right now - why don't you just pass styles for the svg polygon element (fill) of the tooltip?

[GarrettHartley]

@monkey3310 If I understand your suggestion correctly that would require altering the source code, which would potentially break when this project updates. It would be better for it to be built into the API

[matmalkowski]

@GarrettHartley Solution I'm suggesting is just passing the custom CSS class name of your class that has the definitions for Popover-tip You can do background very easily, by just adding the fill css property on that class, with more complex styles (like proper border) its more complex and require some workaround hack. Please check #102 - I had to apply custom styles for the tooltip to add border on it, and I did it right now with proposed method, but its an ugly workaround.

[ufukomer]

How can I change the box-shadow of tooltip?

[therebelrobot]

Adding a className to Popover (in my case, specifically making a styled-component with it) with a child selector worked in my case for fill color:

const PopoverWithStyle = styled(Popover)`
  & > .Popover-tip {
    fill: #37393E;
  }
`;

Drop shadow looks to be bit trickier than just adding box-shadow to that, as it puts the shadow on the box container itself rather than on the svg drawn within it. Maybe use a css-triangle in ::after with a blur filter?

[smeijer]

Maybe use a css-triangle in ::after with a blur filter?

Came here to create an issue for that. I don't understand why the triangle is a svg. That makes it nearly impossible to add a dropshadow.

[cmmartin]

Would still be nice to have a proper API for this for those of us who are using "CSS in JS"