Bind qTip to Kendo Widget

Question

I have this:

<input id="numeric" title="Numeric Tooltip" type="number" min="0" max="100" />

I am trying to do the following:

$("#numeric").kendoNumericTextBox();

then

$('#numeric').qtip({
    content: {
        text: $(this).prop("title")
    }
});

How do I bind these 2 items to the same element?

http://jsfiddle.net/uZUjK/167/

Answer 1

First you need to add the scripts and styles.

Then apply the qtip to the wrapper element of the numeric textbox - because the input element itself is not visible all the time and the tooltip will also not be visible. I updated your fiddle to cover these requirements

var kendoNum = $("#numeric").kendoNumericTextBox().data('kendoNumericTextBox');
kendoNum.wrapper.qtip({
    content: {
        text: kendoNum.element.prop("title")
    }
});

Here is updated version of the link you provided.

Answer 2

Input fields in KendoUI are decorated with other HTML elements in order to make them compatible across browser. Your original input is hidden by another input that does not have numeric id.

Use:

$('#numeric').closest(".k-input-wrapper").qtip({
    content: {
        text: $(this).prop("title")
    }
});

instead.

NOTE: And don't forget to include qtip script and style.