Box Shadow on Tooltip Component but not on arrow

[johnmema]

Question similar to the title. I have a custom tooltip component and using styled divs, adding box shadow to the TooltipContainer adds box shadow to only the rectangular shape and on top of the arrow. Am I doing something wrong or is this just how it is? Thank you!

[gilbarbara]

Hey @johnmema

The custom Tooltip component doesn't include the arrow.
Instead of setting the box shadow on the custom component, override the floater styles.
Be aware the box-shadow only works for squared shapes. You need to use drop-shadow instead.

floaterProps={{
  styles: {
    floater: {
      filter: "drop-shadow(2px -6px 4px #ff0044)"
    }
  }
}}

This can be done globally by setting a prop on the Joyride component or by step.
Does it work for you?

[johnmema]

That works perfectly. For people that may not know this like I didn't, use this file to find other styles on the floater https://github.com/gilbarbara/react-floater/blob/main/src/modules/styles.ts. Thanks!