Sebastian Jeliazkov Sebastian Jeliazkov - 1 year ago 61
jQuery Question

Trying to create div tooltip but failed function not going to return statement

I'm trying to check if the keypress is number or "forward slash" and if its not create tooltip that will show "Letters allowed only!" but when the function starts to create the tooltip its not going to

return false;
. Also when it creates the tooltip he is on the top left corner of the page not on the input position. How can I fix this?

$(document).ready(function() {
$('.groupOfTexbox').keypress(function(event) {
return isNumber(event)

var $tooltip = $('<div style="display:none;position:absolute;padding:10px;background:rgba(0,0,0,0.5);"></div>').appendTo(document.body);

function isNumber(evt) {
var charCode = evt.which;

if ((charCode != 47) && (charCode < 48 || charCode > 57)) {
top: 0,
left: 0
var test = $('groupOfTexbox');
var calculator = new $.PositionCalculator({
item: $tooltip,
itemAt: "bottom left",
target: test,
targetAt: "top left",
flip: "both"
var posResult = calculator.calculate();

top: posResult.moveBy.y + "px",
left: posResult.moveBy.x + "px"

return false;
} else {
return true;

<input type="text" class="groupOfTexbox" data-tooltip="Hello" />

Answer Source

You have a couple of issue with your logic. Firstly you call the isNumber() method from the anonymous function handler, so the scope of this will be the window, not the input which was typed in to. You need to provide the reference of you function to the handler for this to work. Then you need to use evt.preventDefault() to stop the key press event if the entry was not valid. From there you can use the offset() of the input to position the tooltip as required. Try this:


var $tooltip = $('<div style="display: none; position: absolute; padding: 10px; background: rgba(0,0,0,0.5);"></div>').appendTo(document.body);

function isNumber(evt) {
    var charCode = evt.which;
    var $input = $(this);
    if (charCode < 47 || charCode > 57) {
            top: $input.offset().top,
            left: $input.offset().left + $input.width() + 10 // 10px gap

Example fiddle

If you want to allow the numeric keypad to enter numbers as well then you need to allow key codes 96 to 105 as well, as per this question.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download