[英]Balloon doesnt show (Jquery balloons plugin)
您是否尝试过这个jquery Balloon工具提示插件?
我打算用它来通知用户在特定文本框中只允许使用数字。
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 />
它不接受气球显示的字母/字符串/字符,但是当您将鼠标移出并在文本框中再次悬停时,它将出现
尝试这个。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.