气球不显示(Jquery气球插件)

Question

你试过这个jquery气球工具提示插件吗?

jquery.balloon.js演示页面

我打算用它来通知用户在某个文本框上只允许数字。

js代码

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代码

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

它不接受气球显示的字母/字符串/字符，但当你将鼠标移出并将鼠标悬停在文本框上时，它会出现

Answer 1

试试这个

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;
    }

视图:

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