This is a migrated thread and some comments may be shown as answers.
Customize specific tooltips
1 Answer 6 Views
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 24 Feb 2020, 01:23 PM

I need to customize only some tooltips not all the tooltips. Can this be done? (For instance change the background color of some tooltips)

I tried to add HtmlAttributes but they are ignored.

I tried to use a div for the content but the telerik is adding a padding to the tooltip content and instead of having an uniform background color I get a big border and a background in a different color.

I also tried to set a negativ margin to my div but the padding is done not to the parent but the parent of the parent of the content

I do not want to modify all the tooltips (Setting the padding to 0 it would mean that I have to add all the other tooltips in a div where I set padding back).

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 26 Feb 2020, 11:52 AM

Hi Dan,

Consider using the id of the Tooltip you want to customize in a CSS rule's selector. For example:

<style>
    #div2_tt_active {
        background-color: lightblue;
    }

    #div2_tt_active .k-callout{
        border-top-color: lightblue;
    }
</style>

<div id="div1" title="Content1">
    Hover me (div1)
</div>
<br />  
<br />  
<div id="div2" title="Content2">
    Hover me (div2)
</div>

@(Html.Kendo().Tooltip()
    .For("#div1")
    .Position(TooltipPosition.Top)
    .Content("some content 123")
    .AutoHide(false)
    .Width(120)
)

@(Html.Kendo().Tooltip()
    .For("#div2")
    .Position(TooltipPosition.Top)
    .Content("some content 456")
    .AutoHide(false)
    .Width(120)
)

The div element that wraps the Tooltip's content is generated with an id based on the element the Tooltip is shown for. For instance, the second Tooltip in this example is shown for the div element with id "div2". So the Tooltip will render a div element with that id and will concatenate "_tt_active" to it. You can use this id (#div2_tt_active) in a selector, in order to apply styles to this specific Tooltip.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Asked by
Dan
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or