Question

我正在使用jQuery Tooltip，一切都运行正常，有一个小问题：我没有看到工具提示的箭头形状。相反，我得到一个方形。我想让箭头形状指向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:

对于上述每个属性，错误都是这样的“[property]不是已知的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

我花了几个小时来破解CSS以使其在IE 8下工作。该解决方案使用jQuery UI主题提供的三角形图标。请参阅此帖子以获取答案：How do you make the arrows appear on the jQuery UI 1.10.2 Tooltips widget in IE 8?

如何使用jQuery Tooltip？

2 个答案: