This is a migrated thread and some comments may be shown as answers.

how to add a class in the tooltip?

14 Answers 2637 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Method
Top achievements
Rank 1
Method asked on 30 Apr 2013, 06:11 PM
<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?

14 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 01 May 2013, 02:21 PM
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!
0
Method
Top achievements
Rank 1
answered on 02 May 2013, 11:46 AM
the animation event is called before the show event, there is the possibility of adding this class before the event animation?
0
Dimo
Telerik team
answered on 03 May 2013, 06:22 AM
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!
0
Roman
Top achievements
Rank 1
answered on 14 Jul 2015, 10:49 AM

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

1
Inception
Top achievements
Rank 1
Veteran
answered on 21 Dec 2016, 02:18 PM
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.
0
Dimiter Madjarov
Telerik team
answered on 23 Dec 2016, 08:34 AM

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.
0
Inception
Top achievements
Rank 1
Veteran
answered on 02 Jan 2017, 04:30 PM

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

0
Dimiter Madjarov
Telerik team
answered on 03 Jan 2017, 09:30 AM

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.
0
Inception
Top achievements
Rank 1
Veteran
answered on 03 Jan 2017, 11:38 AM

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

0
Dimiter Madjarov
Telerik team
answered on 03 Jan 2017, 12:12 PM

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.
0
Inception
Top achievements
Rank 1
Veteran
answered on 03 Jan 2017, 12:43 PM

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

0
Dimiter Madjarov
Telerik team
answered on 03 Jan 2017, 02:12 PM

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.
0
Mike
Top achievements
Rank 1
answered on 07 Jan 2017, 06:02 PM
I would like to see this implemented as well.  
0
Dimiter Madjarov
Telerik team
answered on 09 Jan 2017, 08:45 AM

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.
Tags
ToolTip
Asked by
Method
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Method
Top achievements
Rank 1
Roman
Top achievements
Rank 1
Inception
Top achievements
Rank 1
Veteran
Dimiter Madjarov
Telerik team
Mike
Top achievements
Rank 1
Share this question
or