Style the tooltip

[Lukas]

Hi  everybody

I was wondering how to style the tooltip, preferrably with styled components. It should have a white background and black font color. The text should spread over 3 lines and the tooltip should have a drop shadow.

But this looks not at all what I expect.

const StyledTooltip = styled(Tooltip)`
  background: white;
  color: black;
  height: 116px;
`;

 

I don't need a full solution, but a hint, how to style the tooltip.

Thanks in advance

Lukas

 

[Silviya]

Hi Lukas,

The Tooltip component renders in such a way that multiple nested elements are induced. By default, the set styles are passed to the top DOM element of the KendoReact component.

So, in this case, you will need to style the nested elements as it's described in this section: https://www.telerik.com/kendo-react-ui/components/styling/styled-components/#toc-styling-nested-elements.

And here is a sample demo to illustrate the desired result based on the screenshot:

https://stackblitz.com/edit/react-vkxyyc?file=app/main.jsx

I hope this helps. Let me know if you need any additional information.

Best Regards,
Silviya
Progress Telerik

[Lukas]

Thank you very much for this quick reply. This is exactly what I needed.