如何使用jQuery Tooltip？

Question

我使用jQuery的工具提示，一切都工作正常，有一個小問題：我沒有看到工具提示的箭頭形狀。相反，我正在變成方形。我想獲得指向TextBox的箭頭形狀。我從here得到了下面的代碼，當你看這個時，一切看起來都不錯。

如何獲得箭頭指向形狀？這裏是我的代碼：

<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和我得到在這些紅線：

box-shadow: 
tranform: 
border-radius: 

錯誤讀取這樣的「[屬性]的不是一個已知的CSS屬性名稱「對於每個上述屬性。

Answer 1

箭頭爲我工作，我基本上只是複製和粘貼你的代碼作爲正文的用戶界面的示例代碼。這是一個愚蠢的問題：你正在加載jqueryUI css之前你的自定義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

我花了幾個小時黑客攻擊CSS，使其在IE 8下工作。該解決方案使用由jQuery UI Themes提供的三角形圖標。請看這篇文章的答案：How do you make the arrows appear on the jQuery UI 1.10.2 Tooltips widget in IE 8?