web-dev-qa-db-ja.com

jQuery UIツールチップ-マウスの垂直方向の中央に正しく配置する方法は？

更新：まだ実行可能な解決策を探していますが、以下の私の答えを確認してください。それはあなたを助けたり、あなたにアイデアを与えるかもしれません。特定の解像度で機能します。

jQuery UIツールチッププラグイン を使用していますが、ツールチップを希望どおりに配置できません。

マウスの垂直方向の中央に配置したいのですが、問題の要素のすぐ左側に配置します。私はそれを正しく表現していると思いますが、私が言っていることの写真をお見せします。

（これはそれが何であるかです すべき やっている）
http://prntscr.com/v2yqi

私の例でわかるように、マウスではなく、要素自体に対して垂直方向に中央に配置されています。

それがマウスで動くことができれば（垂直追跡のみ）、それは完璧でしょう。このプラグインでこれが可能かどうかはわかりません。私は彼らの ポジショニングAPI を本当に理解していません。

そしてここに JSFiddle があります。

  $(function() {
    $( document ).tooltip({
      items: ".entry",
      position: { my: "center", at: "left" },
      content: function() {
        var element = $( this );
        if ( ( element.is( ".entry" ) ) ) {
          return "<div class='hi'>This is a very Nice entry! It's so pretty and I feel     like I can touch it. This is just random filler text to give you the idea..</div>";
        }
      }
    });
});

私はあなたがこれについて私に与えることができるどんな洞察にも本当に感謝します。前もって感謝します。

jqueryjquery-uitooltippositioningjquery-ui-tooltip
7
Dustin Perolio

カスタムクラス、トラッキング、および位置を追加することで、最終的に機能するようになりました。修正済み：

Javascript：

$(function () {
      $(document).tooltip({
          items: ".entry",
          position: {
              my: "right bottom+50"
          },
          tooltipClass: "entry-tooltip-positioner",
          track: true,
          content: function () {
              var element = $(this);
              if ((element.is(".entry"))) {
                  return "<div class='hi'>This is a very Nice entry! It's    so pretty and I feel like I can touch it. This is just random filler text.</div>";
              }
          }
      });
  });

CSS：

.entry {
    position: relative;
    right: -200px;
    width: 500px;
}
.entry-tooltip-positioner {
    position: fixed !important;
    left: -130px !important;
}

そして更新された JSFiddle

うまくいけば、これはいつか他の誰かを助けるでしょう。

8
Dustin Perolio

track: trueを使用できますが、jQueryツールチップはあまりユーザーフレンドリーで柔軟ではないと思います=（試しましたか qTip2 ？

http://jsfiddle.net/5XWaB/2/

2
Steely Wing