how to add a class in the tooltip?

15 posts, 0 answers
  1. Method
    Method avatar
    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>
    </div>
    how to add a class in the tooltip?
  2. Dimo
    Admin
    Dimo avatar
    8369 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!
  3. Method
    Method avatar
    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?
  4. Dimo
    Admin
    Dimo avatar
    8369 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!
  5. Roman
    Roman avatar
    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

  6. Ron
    Ron avatar
    57 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.
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2205 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.
  8. Ron
    Ron avatar
    57 posts
    Member since:
    Oct 2010

    Posted 02 Jan 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

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2205 posts

    Posted 03 Jan 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.
  10. Ron
    Ron avatar
    57 posts
    Member since:
    Oct 2010

    Posted 03 Jan 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

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2205 posts

    Posted 03 Jan 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.
  12. Ron
    Ron avatar
    57 posts
    Member since:
    Oct 2010

    Posted 03 Jan 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

  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2205 posts

    Posted 03 Jan 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.
  14. Mike
    Mike avatar
    14 posts
    Member since:
    Apr 2013

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

    I would like to see this implemented as well.  
  15. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2205 posts

    Posted 09 Jan 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.
Back to Top