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.