Have you tried this jquery balloon tooltip plugin?
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.