10

ページにデフォルトの JQuery UI ツールチップ関数呼び出しがあります。インスペクターを使用してインタラクティブにツールチップ div のスタイルを設定する方法はありますか? マウス ポインターが 2 つある場合、1 つはツールチップを表示したままにするために要素の上に移動し、2 つ目はインスペクターを使用してスタイルを構築します。しかし、私はマウスを 1 つしか持っておらず、要素から離れるとすぐにツールチップが消えます。Inspector で ":hover" 状態を確認しても役に立ちません。ツールチップはマウスアウトで消えます。

私は Chrome を使用していますが、どのブラウザーでもどんなトリックでもかまいません。

4

9 に答える 9

6

私はパーティーに遅れましたが、実際にはこれを達成する簡単な方法があります。

ブラウザーの開発コンソールで、次のように jQuery を使用してツールチップをターゲットにします。

$('.selector').tooltip('open');

たとえば、私の場合、.grey-tooltipツールチップにクラスがあるので、 を呼び出します$('.grey-tooltip').tooltip('open');。これによりツールチップが開き、他の表示要素と同じように調べることができます。

1 つのツールチップを使用できるさまざまな方法については、https ://api.jqueryui.com/tooltip/ のドキュメントで説明されています。

于 2016-07-08T00:20:14.260 に答える
0

最新の Google Chrome で開発者ツールを開くと、要素タブが選択されているはずです。ホバーする必要がある要素で、それを右クリックし、[Force element state] メニューを開いて :hover オプションを選択します。

于 2013-09-15T18:23:52.887 に答える
0

ツール ヒントがホバー時のみではなく常に表示されるように CSS を変更できるはずです。その時点で、インスペクターを介して div のスタイルを微調整し、リアルタイムでどのように影響を受けるかを確認できます。

于 2013-09-15T18:16:44.913 に答える
0


あなたが言っているように、マウスアウト時にDOMから削除されるため、ブラウザーのインスペクターでjQueryツールチップのスタイルを変更することはできません。

ただし、次のコードでは、スタイリングを変更するために変更したのは次のとおりです。

$("#myElement").attr({
    title: "my tooltip text"
}).tooltip();

$("#myElement").tooltip({
    // the .tooltip class is applied by default anyway
    tooltipClass: "tooltip"
});

  1. debugger;前のコードの前に JavaScript を入力します。

  2. Firefox でFirebugF12を開きます (ない場合はダウンロードしてください)。

  3. [スクリプト] タブを選択し、 [リロード] をクリックします

  4. デバッガーがアクティブになったので $("#myElement").tooltip、2 番目のコード ブロック (かっこなし) を強調表示し、強調表示されたテキストを右クリックして、Add Watch

  5. 右側のウィンドウの [ウォッチ] タブで、 の横にある をクリックして、すべての+ プロパティ$("#myElement").tooltipを展開します。

  6. その下で、Constructor、次にDEFAULTS、次に templateを展開して、ツールチップが作成されている HTML を確認します


これは、jQuery ツールチップの公開された HTML 構造です。

<div class="tooltip">
    <div class="tooltip-arrow"> ... </div>
    <div class="tooltip-inner"> ... </div>
</div>


...これで、次のような CSS を適用できます。

.tooltip {
    background-color: blue;
    border: 2px solid black;
    border-radius: 5px;
}
.tooltip-arrow {
    /* hackery, placing the arrow where it should be: */
    margin-bottom: -7px;
}
.tooltip-inner {
    /* hackery, making all browsers render the width correctly: */
    width: 300px;
    min-width: 300px;
    max-width: 300px;

    /* hackery, removing some unknown applied background: */
    background: none;
    background-color: none;

    color: white;
    text-align: center;
}


上記の CSS で言及されているすべての「ハッカー」は、Bootstrap が jQuery でうまく動作するようにするために私がしなければならなかったことです (どちらにも がありtooltip、互いに競合する可能性があります。https: //stackoverflow.com/a/19247955 を参照してください)。詳しくは)。

于 2014-06-15T00:39:21.407 に答える