Balloon ne montre pas (plugin Jongles ballons)

Question

Avez-vous essayé ce plugin info bulle jquery ballon?

jquery.balloon.js Demo page

je prévois de l'utiliser pour informer l'utilisateur que des numéros est seulement autorisé sur un certain champ de saisie.

code de

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

code html

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

Il ne marche pas accepter les lettres/chaînes/caractères le ballon montre mais il apparaîtra lorsque vous déplacez la souris sur et le vol stationnaire sur la zone de texte encore

Answer 1

essayez ceci.

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

Vue:

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