Customize specific tooltips

[Dan]

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).

[Ivan Danchev]

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