Box-shadow on the tooltip element

[thomas-kahn]

Many tooltips are designed with a box-shadow. Providing markup and a CSS configuration to be able to add a box shadow would be nice!

I have attached the tooltip I'm working on right now.

The problem is the arrow.

[bsidelinger912]

Hey @thomas-kahn, for newer browsers I believe this can be done for the css triangle with filter: drop-shadow(), I'll try and play around with an example.

[thomas-kahn]

That would be great!
I did some experimenting myself, but ran into trouble since my solution wasn't compatible with the dynamic positioning of the arrow.

[denisdimitrov]

I tried passing custom class name with filter: drop-shadow() via the prop tipContentClassName But the layout breaks and the tooltip shows at the bottom of the screen. Could you provide a working sandbox if that's possible?

[bsidelinger912]

Hey @thomas-kahn and @denisdimitrov I haven't really played around much with this yet. I'm kind of thinking the css arrow trick is a bit out dated and maybe I should just use and SVG for the arrow. This would be a breaking change, but I'm planning a major version so I could do it with that. I have a bit of a decision to make in the overall direction of the library (try to add events to fragments in React, then get away from adding a wrapping DOM element, or continue to add the wrapping element). Once I make that fundamental decision I can start work on the major version that would likely involve changing how the arrow works as well. Sorry there isn't a quicker solution, but hopefully this all won't take that long. I'll definitely keep this thread updated as I can see other folks wanting drop shadow now that the "flat-ui" trend is starting to cycle back to a more layered look again.

[tkahn]

We solved the problem for now by changing the design, but I think that adding shadow to the tooltip would be an appreciated feature in the long run. Yes - flat and plain designs are still predominant and the design I was implementing is no exception. But when it comes to modals and tooltips, designers often want to accentuate the feeling that it’s something that floats on top of the rest of the page and a subtle shadow is a great way to accomplish this.

[denisdimitrov]

I got it running by using both tipContentClassName and overridering the following styles:

.react-tooltip-lite {
  ...styles;
}

.react-tooltip-lite-arrow {
  ...styles;
}

Thanks!

[bsidelinger912]

Hello everyone I believe this is solved by a recent contribution that adds the "arrowContent" prop. This way you can render the arrow with an SVG and style that as you would like, you can see an example here: https://codepen.io/bsidelinger912/pen/WOdPNK under the "colors" heading by hovering over the text that says: "even more control".