1

私は jQuery ツールチップを使用していますが、1 つの小さな問題ですべてが正常に機能しています。ツールチップの矢印の形が表示されません。代わりに、私は正方形を取得しています。TextBox を指す矢印の形を取得したい。ここから次のコードを取得しました。これを見ると、すべて問題ないように見えます。

矢印を指す形状を取得するにはどうすればよいですか? これが私のコードです：

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

注意すべきことの 1 つは、私が ASP.NET を使用していて、これらの下に赤い線が表示されていることです。

box-shadow:
tranform:
border-radius:

上記の各プロパティについて、「[プロパティ] は既知の CSS プロパティ名ではありません」というエラーが表示されます。

4

2 に答える 2

1

矢印は私のために働いています。基本的には、UI のサンプル コードを本体としてコードをコピーして貼り付けただけです。ここで愚かな質問があります: カスタム css の前に jqueryUI css をロードしていますよね? また、カスタム js を本文の最後、終了</body>タグの直前に移動することもできます。ただし、それが JQuery および JQuery UI の後にあることを確認してください。ここにフィドルへのリンクがあります。

<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

これを IE 8 で動作させるために、CSS をハッキングするのに数時間を費やしました。このソリューションでは、jQuery UI テーマが提供する三角形のアイコンを使用します。答えについては、この投稿を参照してください: 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 に答える