<
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
>
14 Answers, 1 is accepted
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
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
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
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.
Dimiter Madjarov
Telerik by Progress
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
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
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
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
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
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
Hello Mike,
Please use the User Voice portal to cast your vote for this functionality.
Regards,Dimiter Madjarov
Telerik by Progress