Balloon doesnt show (Jquery balloons plugin)

Question

Have you tried this jquery balloon tooltip plugin?

jquery.balloon.js Demo page

I plan to use this to inform the user that Numbers Only is allowed on a certain textbox.

js code

function isNotDigit(key_event) {
return (key_event.which != 8 && key_event.which != 0 && (key_event.which < 48 || key_event.which > 57));
}
function isDigit(key_event) { return (!(isNotDigit(key_event)))}
$(document).ready(function () {
$("#atkFld").keypress(function (e0) {
    if (isNotDigit(e0)) {
        $(this).balloon({contents: 'Numbers Only!'});
        //$(this).next().html("Numbers Only").show().fadeOut("slow"); //Original code
        return false;
      }
  });
});

html code

<input name="Attack" type="text" id="atkFld" placeholder="ATK" required />

It doesnt accept letters/strings/characters the balloon shows but it will appear on when you move the mouse out and the hover on the textbox again

Answer 1

try this.

CSS:

a[bubbletooltip]:link, a[bubbletooltip]:visited
    {
            text-decoration: none;
            position: relative;
            color : white;
    }

    a[bubbletooltip]:before
    {
            content: "";
            position: absolute;
            border-bottom: 21px solid #424242;
            border-left: 21px solid transparent;
            border-right: 21px solid transparent;
            visibility: hidden;
            bottom: -10px;
            left: 100px;
    }

    a[bubbletooltip]:after
    {
            position: absolute;
            content: attr(bubbletooltip);
            color: #FFF;
            font-weight:bold;
            bottom: -25px;
            left: 67px;
            white-space: nowrap;
            background: #424242;
            padding: 5px 10px;
            -moz-border-radius: 6px;
            -webkit-border-radius:6px;
            -khtml-border-radius:6px;
            border-radius: 6px;
            visibility: hidden;
    }

    a[bubbletooltip]:hover:before, a[bubbletooltip]:hover:after
    {
            visibility: visible;
            -moz-transition: visibility 0s linear .3s;
    }

View:

<a href="#" bubbletooltip="text inside balloon."></a>