jQuery 툴팁 사용 방법

Question

jQuery Tooltip을 사용하고 있는데 모든 것이 제대로 작동하고 있습니다. 툴팁의 화살표 모양이 보이지 않습니다. 대신 나는 사각형 모양을 얻고 있습니다. TextBox를 가리키는 화살표 모양을 얻고 싶습니다. here에서 다음 코드를 얻었습니다.이 코드를 보면 모든 것이 괜찮아 보입니다.

화살표 모양을 어떻게 얻을 수 있습니까? 되어

box-shadow: 
tranform: 
border-radius: 

오류이 "[부동산]처럼 읽주의 할

<script type="text/javascript"> 
      $(function() { 
       $(document).tooltip({ 
        position: { 
         my: "center bottom-20", 
         at: "center top", 
         using: function (position, feedback) { 
          $(this).css(position); 
          $("<div>") 
      .addClass("arrow") 
      .addClass(feedback.vertical) 
      .addClass(feedback.horizontal) 
      .appendTo(this); 
         } 
        } 
       }); 
      }); 
    </script> 
    <style type="text/css"> 
    .ui-tooltip, .arrow:after { 
    background: black; 
    border: 2px solid white; 
    } 
    .ui-tooltip { 
    padding: 10px 20px; 
    color: white; 
    border-radius: 20px; 
    font: bold 14px "Helvetica Neue", Sans-Serif; 
    text-transform: uppercase; 
    box-shadow: 0 0 7px black; 
    } 
    .arrow { 
    width: 70px; 
    height: 16px; 
    overflow: hidden; 
    position: absolute; 
    left: 50%; 
    margin-left: -35px; 
    bottom: -16px; 
    } 
    .arrow.top { 
    top: -16px; 
    bottom: auto; 
    } 
    .arrow.left { 
    left: 20%; 
    } 
    .arrow:after { 
    content: ""; 
    position: absolute; 
    left: 20px; 
    top: -20px; 
    width: 25px; 
    height: 25px; 
    box-shadow: 6px 5px 9px -9px black; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    tranform: rotate(45deg); 
    } 
    .arrow.top:after { 
    bottom: -20px; 
    top: auto; 
    } 
    </style> 

한 가지 내가 ASP.NET을 사용하고 내가이 아래 빨간 선을 얻고 있다는 것입니다 : 여기 내 코드입니다 위의 각 속성에 대해 알려진 CSS 속성 이름이 아닙니다. "

Answer 1

화살표가 나를 위해 작동하고, 기본적으로 그냥 복사하여 본문으로 UI의 예제 코드로 코드를 붙여 넣습니다. 다음은 바보 같은 질문입니다. 사용자 정의 CSS보다 먼저 jqueryUI css를로드하고 있습니까? 또한 사용자 정의 js를 몸체의 끝 부분 인 </body> 태그 끝 부분으로 옮기고 싶을 수도 있습니다. JQuery와 JQuery UI 이후에 있는지 확인하십시오. Here's a link to the fiddle.

<script> 
     $(function() { 
      $(document).tooltip({ 
       position: { 
        my: "center bottom-20", 
        at: "center top", 
        using: function (position, feedback) { 
         $(this).css(position); 
         $("<div>") 
     .addClass("arrow") 
     .addClass(feedback.vertical) 
     .addClass(feedback.horizontal) 
     .appendTo(this); 
        } 
       } 
      }); 
     }); 
</script> 
</body> 

편집 : 그냥 웃음을 위해, 내가 이렇게 아주 가난하게 관절 제안을 설명하기 위해 jsfiddle을했다. 롤. 그것은 이미지를 사용합니다. 완벽하지는 않지만 아이디어를 얻습니다. The image Tool pointer !!

희망이 모두 도움이되었습니다.

Answer 2

IE 8에서 작동하도록 CSS를 해킹하는 데 몇 시간을 보냈습니다.이 솔루션은 jQuery UI 테마에서 제공하는 삼각형 아이콘을 사용합니다. 이 게시물을 참조하십시오 대답 : How do you make the arrows appear on the jQuery UI 1.10.2 Tooltips widget in IE 8?