Adding Tooltip dynamically using jQuery

[NEO]

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

[Dimo]

Hi Ravi,

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

Regards,
Dimo
the Telerik team

[NEO]

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

[Dimo]

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

[NEO]

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

[Dimo]

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

[NEO]

Thank you Dimo.

Thanks and Regards,
Ravi

[NEO]

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.

[Dimo]

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

[NEO]

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.

[Dimo]

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

[NEO]

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

[NEO]

Hello Dimo,

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

Regards,
Ravi

[Dimo]

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