1

我正在使用 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>

需要注意的一件事是，我正在使用 ASP.NET，并且在这些下方出现红线：

box-shadow:
tranform:
border-radius:

对于上述每个属性，错误显示为“[property] 不是已知的 CSS 属性名称”。

4

2 回答 2

1

箭头对我有用，我基本上只是复制并粘贴了您的代码，并将 UI 的示例代码作为正文。这是一个愚蠢的问题：您在自定义 css 之前加载 jqueryUI css，对吗？您还可能希望将自定义 js 移动到正文的末尾，就在结束</body>标记之前，只需确保它在 JQuery 和 JQuery UI 之后。这是 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 来说明我表达得很糟糕的建议。哈哈。它使用图像。它并不完美，但你明白了。图像工具指针！！

希望一切都对您有所帮助。

于 2013-03-22T15:20:34.227 回答
0

我花了几个小时修改 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?

于 2013-06-12T15:54:53.393 回答