4

現在、多くのツールチップを使用してサイトに取り組んでいます。ツールチップが常にビューポートに完全に表示されるようにしたいと考えています。

ツールチップ用のプラグインがあることは知っていますが、ツールチップは css を介して行われるため、機能しません (すべてを変更することはできません!)。ツールチップを取得したい要素には position:relative が与えられ、その直後に class='tooltip' を持つ要素が続きます - CSS コードは次のとおりです:

.tooltip{
    display:none;
    color: #262626;
    background-color: #FEFEE0;
    padding: 5px 12px;
    position: absolute;
    box-shadow: 0 0 5px #A6A6A6;
    margin-top:-8px;
    z-index: 1000;
}
*:hover + .tooltip {
    display:block ! important;
}
.tooltip:hover{
    display:block;
}

私がやりたいことは、ツールチップが表示されるたびに（またはツールチップの前の要素がホバーされるたびに）、関数を実行してオフセットを計算し、それが画面に収まるようにすることです（そうでない場合は移動します） .

私がまだ試していないことを今考えることができる唯一のことは、次のようなものを実行することです:

$("*:hover").each(function(e){
  if ($(this).next().hasClass('tooltip')
    //run some positioning function
}

わかりました、私はjqueryの専門家ではありません。上記はバグがある可能性があります。まだ試していませんが、アイデアはわかります。しかし、それは理にかなっていますか？パフォーマンスに（悪い意味で）影響しますか？

私はこれに何時間も費やし、空になってしまいました。どんなアイデアでも大歓迎です！

4

2 に答える 2

1

tooltipsyプラグインを調べたところ、あなたが言ったようにツールチップが配置されていることがわかりました。ここでサンプルを確認できます。

すべての要素をリッスンするのではなく、ツールチップのhtml要素タイプを定義し、ホバーイベントをリッスンします。したがって、すべての可能なデータのツールチップ要素を作成するのではなく、各要素にタイトルコンテンツデータを設定できます。

<a href="#" class="see-tooltip" title="Title-1" content="Content-1">Hover Me!</a>

そして、ホバーイベントを「show-tooltip」クラスに割り当てます。

var $tooltip = $('#tooltip'); //select the early created tooltip element here
$('a.show-tooltip').hover(function() {
   var title = $(this).attr('title');
   var content = $(this).attr('content');
   //set title and content to $tooltip here
   //calculate and set positioning here
   $tooltip.show(); //show tooltip after setting it's new position
}, function() {
    $tooltip.hide(); //hide tooltip when hover ends
);
于 2012-12-03T11:43:49.730 に答える
1

あなたの問題に対するはるかに簡単な解決策があります。position:fixed;ビューポートに従って要素を配置するために使用できます。私の知る限り、これは Internet Explorer 7 でのみ失敗するため、これを気にする場合は、IE7 のトリックを使用して固定位置をシミュレートする必要があります。また、*セレクターとそこで行っていることは、間違いなくパフォーマンスに影響を与えます。 これは、CSS および JS プロファイリングについて読むのに適した場所です。徹底的に詳細に書かれていますが、読む価値があることに注意してください。

于 2012-12-03T09:42:23.270 に答える