how to add a class in the tooltip?

5 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
    8330 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. Kendo UI is VS 2017 Ready
  4. 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?
  5. Dimo
    Admin
    Dimo avatar
    8330 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!
  6. 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

Back to Top
Kendo UI is VS 2017 Ready