This is a migrated thread and some comments may be shown as answers.

Change Tooltip color ?

1 Answer 896 Views
Tooltip
This is a migrated thread and some comments may be shown as answers.
Rihen
Top achievements
Rank 1
Rihen asked on 08 Jun 2020, 12:33 PM

Hello,

I would like to change the color of my tooltip, and also of my buttons, as I understood, the whole UI is set with a single base Theme (Bootstrap or else).

The problem is that the tooltip with bootstrap is blue, and if I add it on a primary button, it's blue on blue and not readable. An attribute letting us to set the Color of a tooltip or a button would be good. I can't but red warning buttons for example.

I tried to set the class of a tooltip with a different background color, but only the rectangle is set not the whole tooltip (see pic).

 

Thanks in advance

 

 

1 Answer, 1 is accepted

Sort by
2
Marin Bratanov
Telerik team
answered on 08 Jun 2020, 01:06 PM

Hi,

An alternative is to style the buttons explicitly: https://docs.telerik.com/blazor-ui/components/button/overview#styling

You can also style the tooltips by inspecting their rendering and overriding rules from our classes. This blog post can help you do that: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools. Here's an example I made for you:

<style>
    .k-tooltip {
        background-color: red;
    }

    div.k-tooltip .k-callout {
        color: red;
    }
</style>

<TelerikButton Title="the button title">lorem ipsum</TelerikButton>

<TelerikTooltip TargetSelector="p a[title], .k-button">
</TelerikTooltip>

<p>
    <a title="what is 'lorem ipsum'?" href="https://lipsum.com/">lorem</a>
    ipsum dolor
    <a title="is this a real word?" href="https://en.wikipedia.org/wiki/SIT">sit</a>
    amet.
</p>

 

Regards,
Marin Bratanov
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.
Tags
Tooltip
Asked by
Rihen
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or