how to add a class in the tooltip?

[Method]

<div class="k-animation-container" style="width: 397px; height: 24px; margin-left: -2px; padding-left: 2px; padding-right: 2px; padding-bottom: 4px; overflow: visible; display: block; position: absolute; top: 276px; z-index: 10002; left: 399px;">
    <div role="tooltip" class=" MY_CLASS_ADD  k-widget k-tooltip k-tooltip-closable k-popup k-group k-reset k-state-border-down" data-role="popup" style="display: block; position: absolute; -webkit-transform: translateY(0px);" id="my_id_tooltip_tt_active">

        <div class="k-tooltip-button"><a href="#" class="k-icon k-i-close">close</a></div>
        <div class="k-tooltip-content">my message</div>
        <div class="k-callout k-callout-s" style="left: 195px;"></div>

    </div>
</div>

how to add a class in the tooltip?

[Dimo]

Hello,

You can use the show event of the ToolTip and add the custom CSS class with Javascript :

function onShow(e) {
    this.popup.element.addClass("my_class");
}

Another option might be to apply your custom styles to the k-tooltip class, so that a custom class is not needed.

Regards,
Dimo
the Telerik team

[Method]

the animation event is called before the show event, there is the possibility of adding this class before the event animation?

[Dimo]

Hello,

You can use the following approach, however, it uses the Tooltip's private API, so it is not officially supported or documented.

var tt = $("#anchor").kendoTooltip().data("kendoTooltip");

tt._initPopup();

tt.popup.bind("open", function(e){
    e.sender.element.addClass("my_class");
});

Regards,
Dimo
the Telerik team

[Roman]

Hi,

Setting a custom css class to tooltip container can be done:

 1. Using reference on widget popup

var widget = $('#tooltip').kendoTooltip().data('kendoTooltip');
widget.show();
widget.popup.element.addClass('CUSTOM_CLASS');

Using this approach you will be content that all necessary logic of showing tooltip executed and you can manipulate with this element css as you want.

2. Create your own widget extended from kendo.ui.Tooltip. In this case you can manipulate with tooltip as you want.

Information how to create custom widget  you will find here

[Ron]

Are there any plans to properly support addin custom class for the tooltip component? The show event is not an option as it is called after the animation event as previousy stated.This in effect will result in flickering. Using an internal and undocument function _initPopup is not a very nice solution either.

[Dimiter Madjarov]

Hello Ron,

Possible approach would be to set the content of the tooltip as a function, which will return the actual content:

http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip#configuration-content

This way you could manually wrap it in an element with specific class. Here is an example of this.

Regards,
Dimiter Madjarov
Telerik by Progress

[Ron]

Hi Dimiter,

Unfortunately that doesn't help me very much. I am using Kendo's Office 365 theme but that theme doesn't show callout arrows. By adding a custom class, I can override the theme's settings to force the callout to be shown. Your solution only affects the tooltip contents but doesnt allow me to show the callout arrows. A general override is not an option either as the callout should not always be shown but only in specific cases.

Regards,
Ron

[Dimiter Madjarov]

Hello Ron,

The other workaround we  could suggest is to add the class in the show event handler of the Tooltip. Here is the updated example demonstrating this. If this does not suit the current requirements, I would recommend to use another theme instead.

Regards,
Dimiter Madjarov
Telerik by Progress

[Ron]

As stated before, the show event is not an option as it is called after the animation event. This solution causes a small flickering which I find to be unacceptable. Changing the entire theme is also unacceptable as this means that I have to change the theme of my entire application. Seems like I'm stuck with using a nasty bit of code involving using the undocument _initPopup function.

Regards,
Ron

[Dimiter Madjarov]

Hello Ron,

This is correct, at the moment there is no suitable workaround for applying the class before the animation through the public API.

Regards,
Dimiter Madjarov
Telerik by Progress

[Ron]

Ok, the question remains then if there are any plans to support adding a class to the tooltip or maybe adding a pre-show event?

Regards,
Ron

[Dimiter Madjarov]

Hello Ron,

At the moment we don't have plans to implement such event. I would suggest to post this idea on our UserVoice portal, which will help us to measure how many customers need such feature and schedule our development plans accordingly.

Regards,
Dimiter Madjarov
Telerik by Progress

[Mike]

I would like to see this implemented as well.  

[Dimiter Madjarov]

Hello Mike,

Please use the User Voice portal to cast your vote for this functionality.

Regards,
Dimiter Madjarov
Telerik by Progress