2

特定の要素がホバーされたときにツールチップをアクティブにするために、jQueryプラグインのほろ酔いを使用しています。現在、ツールチップはそれがトリガーされた要素の中央に表示されますが、対応する見出しの上にツールチップが表示されるようにプラグインをカスタマイズしたいと考えています。以下にリンクした例を見てください。ツールチップは、div 全体#everythingがホバーされるとトリガーされますが、これは正しいのですが、ツールチップを見出しの上に表示したいと思います。

例: http://jsfiddle.net/JqFwP/2/

私が達成しようとしていることについて、さらに詳しい情報や説明が必要な場合はお知らせください。

ありがとうございました。

4

3 に答える 3

4

私はほろ酔いプラグインに慣れていませんが、mouseenterイベントを にチェーンするのはどう#everythingですか?

ジャバスクリプト:

$("#everything").tipsy({
    gravity: 's'
}).mouseenter(function(){
    var top=$(this).find('h2').offset().top - 35,
        left=$(this).find('h2').offset().left - 10;
    $('.tipsy').css({
        'top': top + 'px',
        'left': left + 'px'
    });
});

デモ (単一見出し): http://jsfiddle.net/dirtyd77/JqFwP/16/

デモ (複数の見出し): http://jsfiddle.net/dirtyd77/JqFwP/17/

私見ですが、代わりにjQueryUI のツールチップを使用することをお勧めします。より有利になる気がします。ちょっとした考え！ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-02-28T21:24:45.703 に答える
0

プラグインのコードを操作することは、私の観点からは最善の解決策ではありません。@Dom のアプローチは素晴らしいように見えますが、tipy 要素の中央にツールチップがバインドされていることを示す、tipy の重力属性の「s」値をサポートしていません。

私が最初に考えたのは、コンテナ「div」へのマウスの入力を検出し、ほろ酔いを内部ヘッダー (h2) にバインドすることでした。h2 はデフォルトでブロックとして表示され、コンテナー要素の 100% を占めるため、小さなヘッダーでは機能しません。

コンテンツを分割するヘッダーに CSS スタイルを追加する必要があります。そのため、h2 コンテンツを span 要素でラップして、物事をクリーンで明確に保つソリューションを構築することができました。

元の HTML の操作

<div id="everything" original-title="The whole kit and caboodle.">
     <h2>Working with really great and awesome headlines</h2>
     ....
</div>

に

<div id="everything" original-title="The whole kit and caboodle.">
     <h2><span original-title="The whole kit and caboodle.">Working with really great and awesome headlines</span></h2>
</div>

最後ではありませんが、プラグインが DOM を操作する方法を見つけることができなかったため、各 div コンテナーに対して 1 回だけほろ酔いをバインドするためにコードを洗練しました。

@ 585connorが提案したように更新されたバージョン

http://jsfiddle.net/JqFwP/22/

更新 vol2: 私のアプローチには別の問題があります。見出しが短すぎると、ツールチップが DOM の外に取り除かれます。ラッピングスパンのクラスといくつかのcssコードを使用して、これを解決することができました。

この問題の証明 http://jsfiddle.net/JqFwP/25/

私の回避策 http://jsfiddle.net/JqFwP/24/

于 2013-03-05T23:06:10.240 に答える
0

わかったと思います。

この pos 変数を次から変更する必要があります。

           var pos = $.extend({}, this.$element.offset(), {
                width: this.$element[0].offsetWidth,
                height: this.$element[0].offsetHeight
            });

に：

           var pos = $.extend({}, this.$element.offset(), {
                width: $(this).children("h2").offsetWidth,
                height: $(this).children("h2").offsetHeight
            });

ここで働くフィドル： http://jsfiddle.net/jeremythuff/L9BVc/8/

于 2013-03-05T03:54:53.703 に答える