1

jQuery Tipsy Pluginを使用して、プロジェクトでツール ヒントを作成しています。プラグインページのデモに見られるように、ツールチップは自動的に要素の中央に配置されますが、要素の左側に配置したいのですが、これを行う方法を知っている人はいますか? プラグインは、表示時にツールチップの絶対位置を自動的に設定します。この機能を変更しようとしましたが、うまくいきませんでした。

更新 1 : ドキュメントとgravityオプションを十分に認識しています。ツールチップの矢印を対応する要素の左端の中央に配置しようとしています。

更新 2 : ツールチップの配置方法のモックアップを次に示します。 左: 現在、右: 意図

4

4 に答える 4

2

解決策が見つかりました。間違った関数を編集していました。「NW/SW」重力用に特別に別の関数があり、JSが更新されたことが判明しました。

            if (gravity.length == 2) {
                if (gravity.charAt(1) == 'w') {
                    tp.left = pos.left - 5;
                } else {
                    tp.left = pos.left + pos.width / 2 - actualWidth + 15;
                }
            }

他の人がこの機能を必要とする場合に備えて、Gitでこれをフォークします。

于 2012-05-30T20:44:34.537 に答える
1

重力オプションに基づいて位置を設定できるはずです。

$('#foo').tipsy({gravity: 'e'});  // these are coordinates: // nw | n | ne | w | e | sw | s | se

プラグインのオプションに関する情報は、このページにあります。詳細またはその他の設定オプションについては、重力と呼ばれるセクションを参照してください。

http://onehackoranother.com/projects/jquery/tipsy/#

于 2012-05-30T18:37:04.753 に答える
1

答えてくれた@Ryanに感謝します。これはまさに私が探していたものです。私はあなたのコードをもう少し進めて、より多くの機能を提供しました。

次のことを行うために、tippy に 2 つの新しいオプションを追加しました。

  • /では、swまたはnwを使用できedgeAlignWest: 'right'ますedgeAlignWest: 'center'
  • /では、seまたはneを使用できedgeAlignEast: 'left'ますedgeAlignEast: 'center'

これを行う新しいコードは

// line 61, tipsy version 1.0.0a
if (gravity.length == 2) {
    if (gravity.charAt(1) == 'e') {
        tp.left = (this.options.edgeAlignEast == 'right') ? (pos.left + pos.width - actualWidth + 15) : (pos.left + pos.width / 2 - actualWidth + 15);
    }else if (gravity.charAt(1) == 'w') {
        tp.left = (this.options.edgeAlignWest == 'left') ? (pos.left - 5) : (pos.left + pos.width / 2 - 15);
    } else {
      tp.left = pos.left + pos.width / 2 - actualWidth + 15;
  }
}

//...
// line 191, tipsy version 1.0.0a
$.fn.tipsy.defaults = {
    edgeAlignEast: 'center',  // <-- new option, default to 'center', you can also use 'right'
    edgeAlignWest: 'center',  // <-- new option, default to 'center', you can also use 'left'
    className: null,
    delayIn: 0,
    delayOut: 0,
    fade: false,
    fallback: '',
    gravity: 'n',
    html: false,
    live: false,
    offset: 0,
    opacity: 0.8,
    title: 'title',
    trigger: 'hover'
};
于 2016-07-08T14:47:18.953 に答える
0

ソース (43 行目) を調べると、

私はこれを見つけ、

case 'n':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};

を変更するとうまくいくleftはずです。

于 2012-05-30T20:23:38.430 に答える