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

Question

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)) {
            $tooltip.text($(this).data('tooltip'));
            $tooltip.show().css({
                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();

            $tooltip.css({
                top: posResult.moveBy.y + "px",
                left: posResult.moveBy.x + "px"
            });

            return false;
        } else {
            return true;
        }
    }
});

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

Its the Jquery PositionCalculator Plugin.I dont know what is the other way to get the top and left offsets of the input box — Sebastian Jeliazkov, Jul 09 '16 at 15:13

score 1 · Accepted Answer · edited May 23 '17 at 10:28

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:

$('.groupOfTexbox').keypress(isNumber);

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) {
        evt.preventDefault();
        $tooltip.text($input.data('tooltip')).show().css({
            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.

its working perfectly but how can i hide the $tooltip after 3 seconds of showing i tried with $tooltip.delay(3000).hide(); but it seems that its not working — Sebastian Jeliazkov, Jul 09 '16 at 15:24
For that you can use `setTimeout()`, like this: https://jsfiddle.net/RoryMcCrossan/br5c2jdx/1/ — Rory McCrossan, Jul 09 '16 at 15:26

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

1 Answers1