1

私はjsfiddleの例を用意しました:

http://jsfiddle.net/PEH7t/11/

問題は、相対的な位置 (変更できない) を持つコンテナーがあることです。私の問題を解決するはずのtooltip setting を見つけましrelative: trueた (ツールチップの位置を設定するために、オフセットの代わりに jQuery の位置を使用します)。これは、overflow: auto がなければ問題なく動作します (これも変更できません)。コンテナをスクロールしてからヘルプ アイコンをクリックすると、ツールチップはコンテナに相対的な位置を取得しますが、スクロールは考慮されません。ツールチップの位置がずれます。

これを修正する方法を知っている人はいますか？

おまけの質問: ツールチップを初めてクリックすると、構成されたアニメーションが表示されます。ツールチップを閉じてヘルプ アイコンをもう一度クリックすると、ツールチップがアニメーションなしでポップアップします。その動作を変更して、表示時に常に素敵なアニメーションを取得するにはどうすればよいですか?

4

2 に答える 2

1

このプラグイン/ツールキットについて、修正方法についてコメントするには十分な知識がありません。代わりに、独自のコードを作成することをお勧めします。

各ツールチップ ボタンの横に display:none を付けたスタイルの div を使用するだけで、これを行うコードをかなり簡単に作成できます。ボタンがクリックされると、ツールチップ div を切り替えます。このようにして、完全に制御できるようになり、既存のコードを回避したり、押し込んだりする必要がなくなります。

例：

CSS

.someContainer
{
    position:relative;
}
._js_tooltip
{
    display:none;
    width: 300px;
    height: 100px;
    position:absolute; /*relative to container*/
    top: 10px;
    right: 10px;
}

html

<!-- your tooltips are inline, positioned however you want -->
<div class='someContainer'>
  <div class='_js_tooltip'>this is a tooltip</div>
  <div class='_js_tooltip_button'>this is the button</div>
</div>

<div class='someContainer'>
  <div class='_js_tooltip'>this is a tooltip</div>
  <div class='_js_tooltip_button'>this is the button</div>
</div>

脚本

$('._js_tooltip_button').on('click', function(){
    $(this).siblings('._js_tooltip').toggle();
});
于 2012-03-08T11:50:31.207 に答える
1

すごい。私は解決策について何時間も考えてきましたが、今ではちょうど私を襲いました:

.editor-field
{
 position: relative;  
}

出来上がり。おまけの質問はまだ開いています。

于 2012-03-08T11:57:41.753 に答える