如何使用jQuery工具提示？

我正在使用jQuery工具提示，但有一个小问题：我没有看到工具提示的箭头形状。相反，我得到的是一个正方形。我想得到指向文本框的箭头形状。我从中得到了以下代码，当你看这个时，一切看起来都很好

如何获得指向箭头的形状？这是我的密码：

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

---

对于上述每个属性，“[property]不是一个已知的CSS属性名”。箭头对我有效，我基本上只是复制并粘贴了您的代码，并将UI的示例代码作为主体。这里有一个愚蠢的问题：你在自定义css之前加载jqueryUI css，对吗？您还可能希望将自定义js移动到正文的末尾，就在结尾

标记之前，只需确保它位于JQuery和JQuery UI之后

$（函数（）{
$（文档）。工具提示({
职位：{
我的：“中底20”，
在“中心顶端”，
使用：功能（位置、反馈）{
$（this.css（position）；
$("")
.addClass（“箭头”）
.addClass（反馈.垂直）
.addClass（反馈.水平）
.附于（本）；
}
}
});
});

编辑：只是为了逗笑，我做了一个jsfiddle来说明我的建议表达得非常糟糕。lol。它使用图像。这并不完美，但你明白了

---

希望一切都有帮助。

箭头对我有用，我基本上只是复制并粘贴了您的代码，将UI的示例代码作为主体。这里有一个愚蠢的问题：你在自定义css之前加载jqueryUI css，对吗？您还可能希望将自定义js移动到正文的末尾，就在结尾

标记之前，只需确保它位于JQuery和JQuery UI之后

$（函数（）{
$（文档）。工具提示({
职位：{
我的：“中底20”，
在“中心顶端”，
使用：功能（位置、反馈）{
$（this.css（position）；
$("")
.addClass（“箭头”）
.addClass（反馈.垂直）
.addClass（反馈.水平）
.附于（本）；
}
}
});
});

编辑：只是为了逗笑，我做了一个jsfiddle来说明我的建议表达得非常糟糕。lol。它使用图像。这并不完美，但你明白了

---

希望一切都有所帮助。

我花了几个小时对CSS进行了黑客攻击，以使其在IE 8下工作。该解决方案使用jQueryUI主题提供的三角形图标。请看这篇文章以获得答案：

我花了几个小时对CSS进行黑客攻击，以使其在IE8下工作。该解决方案使用jQueryUI主题提供的三角形图标。请参阅本文以获取答案：

由于编辑器没有CSS3 IntelliSense，因此这些属性下出现红色错误行。您使用的浏览器（包括版本）是什么？我只是使用正在使用IES的development server。您在哪里看到CSS错误？Visual Studio？它似乎适用于chrome，但不适用于IE。如何修复此问题以确保箭头在所有浏览器中都有效？感谢您在这些属性下出现红色错误行，因为您的编辑器没有CSS3 IntelliSense您使用的是什么浏览器（包括版本）？我正在使用使用IES的development server。您在哪里看到CSS错误？Visual Studio？它似乎适用于chrome，但不适用于IE。如何修复此问题以确保箭头在所有浏览器中都有效？谢谢，我看到这是浏览器的问题，如果我使用chrome，那么它会工作，但IE不工作，换句话说，我没有得到箭头。我该如何解决这个问题？@moe不幸的是，如果它没有显示箭头，很可能是因为你的IE版本不支持伪选择器。除了图像替换之外，没有什么好办法来解决浏览器支持问题。你可以给箭头一个背景图像。我的建议是做浏览器嗅探，也许是现代化，对于不支持：：before和：：after的浏览器，在主体中添加一个no-psuedo类。通过在图像上做透明的角，给.arrow类一个菱形。然后，您可以添加类规则（例如no pseudo.arrow.left）将菱形放在容器的中间，创建一个箭头。而且，看起来麻烦多了。我只需要留下无箭头的工具提示，用户仍然会有更丰富的体验，并且永远不会知道或关心箭头的存在。我发现这是浏览器的问题，如果我使用chrome，那么它会工作，但IE不工作，换句话说，我没有箭头。我该如何解决这个问题？@moe不幸的是，如果它没有显示箭头，很可能是因为你的IE版本不支持伪选择器。除了图像替换之外，没有什么好办法来解决浏览器支持问题。你可以给箭头一个背景图像。我的建议是做浏览器嗅探，也许是现代化，对于不支持：：before和：：after的浏览器，在主体中添加一个no-psuedo类。通过在图像上做透明的角，给.arrow类一个菱形。然后，您可以添加类规则（例如no pseudo.arrow.left）将菱形放在容器的中间，创建一个箭头。而且，看起来麻烦多了。我只需留下无箭头的工具提示，用户仍然会有更丰富的体验，并且永远不会知道或关心箭头的存在。

box-shadow:
tranform:
border-radius:

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