Adding Tooltip dynamically using jQuery

14 posts, 1 answers
  1. NEO
    NEO avatar
    9 posts
    Member since:
    Sep 2012

    Posted 28 Apr 2013 Link to this post

    Hello,

    I want to add the tooltip dynamically based on some conditions to my date picker when the user changes the date using JQuery. how i can do that? below is my data picker

    @(Html.Kendo().DatePicker()
     .Name("dtTDate")
     .Value(Model.TDate)
     .Format("dd-MMM-yyyy")
     .HtmlAttributes(new { style = "width:120px"}))


    Regards,
    Ravi
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 30 Apr 2013 Link to this post

    Hi Ravi,

    You can initialize and open a Kendo UI Tooltip in the DatePicker's change event handler.

    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. NEO
    NEO avatar
    9 posts
    Member since:
    Sep 2012

    Posted 06 May 2013 Link to this post

    Hello Dimo,
    I have tried as per your suggestion but not successfull, I think I have made some mistake while implementing could you please check my sample code given below?
    Kenod datepikcer and the tooltip
       @(Html.Kendo().DatePicker()
                           .Name("DateToolTip")
                           .Value(Model.Date)
    .Format("dd-MMM-yyyy")
                  .HtmlAttributes(new { style = "width:120px" }))
     
       @(Html.Kendo().Tooltip()
                    .For("#DateToolTip")
            .Position(TooltipPosition.Top)
            .Width(120)
        )
    once the user click on the submit button I need to perform some action in the controller and the result needs to be displayed in the control tooltip.
     $.ajax({
                url: '@Url.Action("ActionMethod", "Controller")',
                type: 'Post',
                dataType: 'json',
                data: dataJSON,
                success: function (data) {
                    if (data.success == false) {
                     // Some action
                    }
                    else {
                             $("#DateToolTip").data("kendoTooltip").show("data.Result");
                    }
                },
                error: function (request, status, err) {
      // some action
                }
            });
    Thanks and Regards,
    Ravi
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 May 2013 Link to this post

    Hi Ravi,

    The show() method of the Tooltip accepts a DOM element, not string content.

    http://docs.kendoui.com/api/web/tooltip#methods-show

    In case you need to set the tooltip content on the fly, then create the Tooltip widget client-side on the fly as well, and use the content property.

    http://docs.kendoui.com/api/web/tooltip#configuration-content

    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. NEO
    NEO avatar
    9 posts
    Member since:
    Sep 2012

    Posted 06 May 2013 Link to this post

    Hello Dimo,

    I tried with the below given syntex and worked for me could you please check that

    $("#DateToolTip").data("kendoTooltip").element.context.title = data.Result;

    Can i follow that or I need to user only the content property to solve the issue?

    I what to add another point, i need to show the result for more controls not just for one control. is there any better way to handle this?

    Regards,
    Ravi
  7. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 May 2013 Link to this post

    Hi Ravi,

    Using the suggested approach is also possible, because the Tooltip can take the element's title automatically.

    In case you want to show mutiple validation results in a single Tooltip, you will need to build some string and set it as its content. However, since a tooltip is usually related only to one element, using multiple Tooltips would be better from user's perspective.

    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!
  8. NEO
    NEO avatar
    9 posts
    Member since:
    Sep 2012

    Posted 06 May 2013 Link to this post

    Thank you Dimo.

    Thanks and Regards,
    Ravi
  9. NEO
    NEO avatar
    9 posts
    Member since:
    Sep 2012

    Posted 09 May 2013 Link to this post

    Hello,

    Below given logic is working only for the Kendo datePicker and for rest of the controls it is not working (dropdownlist,numeric text box etc) how to handle these controls?

       $("#KendoDatePick").data("kendoTooltip").element.context.title = Message;
       $("#KendoDatePick").css("border", "1px solid Red");

    Thanks and Regards,
    Ravi.
  10. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 May 2013 Link to this post

    Hello Ravi,

    The "ID carriers" of the NumericTextBox, ComboBox and DropDownLists are hidden, so even if you set a title attribute for them, they will not trigger a mouseover event and no ToolTip will appear. You should set the title attribute to some visible element, for example the widget wrapper.


    $("#MyComboBoxID").data("kendoComboBox").wrapper.context.title = "my title";


    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!
  11. NEO
    NEO avatar
    9 posts
    Member since:
    Sep 2012

    Posted 09 May 2013 Link to this post

    Hello,
    I tried the way you suggested but no Luck. Actually my controls are on Partial view and i am opening the partial view as modal popup using kendo window.
    Is there any browser specific? my browser is IE 8.0.6001.18702
    Thanks and Regards,
    Ravi.
  12. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 May 2013 Link to this post

    Hi Ravi,

    Probably the issue is caused by incorrect usage of the .context jQuery property. Please refer to the following demo:

    http://jsfiddle.net/dimodi/Axg9H/

    Notice that if you want to show several tooltips simultaneously, you need several Kendo UI Tooltip instances, as in the example above.

    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!
  13. NEO
    NEO avatar
    9 posts
    Member since:
    Sep 2012

    Posted 10 May 2013 Link to this post

    Hello Dimo,
    Your post has solved my problem. there was a syntex error which i corrected after seeing your sample.

     I am follwing the below code to add the css class to the controls(all controls are on partial view opened as modal popup using kendo window) single click it is not showing the effect but if i double click then the css class is applying to the controls. but the same is not working in crome. Could you please check the sample code below.
     var ctrl = $("#CounterParty").kendoComboBox();
     ctrl.addClass('errorBorder');

     var ctrl1 = $("#dtSettlementDate").kendoDatePicker();
     ctrl1.addClass('errorBorder');

     var ctrl2 = $("#Leg1PaymentCalendar").kendoDropDownList();
     ctrl2.addClass('errorBorder');
     var ctrl3 = $("#Factor").kendoNumericTextBox();
     ctrl2.addClass('errorBorder');

    Thanks and Regards,
    Ravi
  14. NEO
    NEO avatar
    9 posts
    Member since:
    Sep 2012

    Posted 10 May 2013 Link to this post

    Hello Dimo,

    Is there any way to handle the same for normal html controls  like input textbox ?

    Regards,
    Ravi
  15. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 May 2013 Link to this post

    Hi Ravi,

    The provided information does not suggest what might be the problem. You can do the following:

    1. Debug the Javascript code and make sure it is executed when it should, and the CSS class is applied to the expected element.

    2. Inspect the HTML elements with the browser's developer tools and make sure the expected CSS styles are not overridden by ones with higher specificity.

    If the above guidelines do not help, please isolate the code that you have provided in a jsFiddle example, similar to the one I provided previously.

    I am not sure how your question about the input elements is related to Kendo UI, please clarify.

    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!
Back to Top
Kendo UI is VS 2017 Ready