풍선이 보이지 않습니다 (Jquery balloons plugin)

Question

jquery balloon 툴팁 플러그인을 사용해 보셨습니까?

jquery.balloon.js Demo page

나는 숫자 만 특정 텍스트 상자에 허용되는 사용자를 알리기 위해이를 사용할 계획입니다.

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>