Style the tooltip

3 posts, 1 answers
  1. Lukas
    Lukas avatar
    4 posts
    Member since:
    Jun 2020

    Posted 23 Jun 2020 Link to this post

    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

     

  2. Answer
    Silviya
    Admin
    Silviya avatar
    442 posts

    Posted 23 Jun 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Lukas
    Lukas avatar
    4 posts
    Member since:
    Jun 2020

    Posted 23 Jun 2020 in reply to Silviya Link to this post

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