how to add a class in the tooltip? in Kendo UI for jQuery ToolTip

Method

8 posts

Member since:
Jul 2012

Posted 30 Apr 2013 Link to this post

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

how to add a class in the tooltip?

Dimo

Admin

8472 posts

Posted 01 May 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Method

8 posts

Member since:
Jul 2012

Posted 02 May 2013 Link to this post

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

Dimo

Admin

8472 posts

Posted 03 May 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Roman

1 posts

Member since:
Jun 2015

Posted 14 Jul 2015 Link to this post

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

73 posts

Member since:
Oct 2010

Posted 21 Dec 2016 Link to this post

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

Admin

2310 posts

Posted 23 Dec 2016 Link to this post

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

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Ron

73 posts

Member since:
Oct 2010

Posted 02 Jan 2017 in reply to Dimiter Madjarov Link to this post

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

Admin

2310 posts

Posted 03 Jan 2017 Link to this post

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

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Ron

73 posts

Member since:
Oct 2010

Posted 03 Jan 2017 in reply to Dimiter Madjarov Link to this post

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

Admin

2310 posts

Posted 03 Jan 2017 Link to this post

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

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Ron

73 posts

Member since:
Oct 2010

Posted 03 Jan 2017 in reply to Dimiter Madjarov Link to this post

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

Admin

2310 posts

Posted 03 Jan 2017 Link to this post

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

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Mike

15 posts

Member since:
Apr 2013

Posted 07 Jan 2017 in reply to Dimiter Madjarov Link to this post

I would like to see this implemented as well.

Dimiter Madjarov

Admin

2310 posts

Posted 09 Jan 2017 Link to this post

Hello Mike,

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

Regards,
Dimiter Madjarov
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.