web-dev-qa-db-ja.com

Joomla 3のツールチップCSSの変更に関する問題

Joomla 3.9でツールチップcssのcssプロパティを変更しようとしています。つまり、テキストラベルにカーソルを合わせると、その説明が表示されます。ブラウザーのインスペクターツールで「強制状態：ホバー」を使用しても、対応するcssクラスが見つかりません。誰でもそれを行う方法を知っていますか？

編集：この画像をご覧ください。

The mouse hovers over label "Name *" and tooltip appears on the right

マウスをラベル「名前*」の上に置くと、ツールチップが右側に表示されます。ツールチップに背景色を付けたいのですが。

cssjoomla-3.9
1
Benjamin Röhling

問題は、ツールチップに希望するスタイルがなかったということでした。クエストは次のとおりです。それを変更できるようにツールチップのcssクラスを知ること。解決策：ツールチップのcssクラスのインターネットをグーグルし（jqueryの提案が機能しなかった）、.popoverクラス（ツールチップ）。

CSSが追加されました：templates/$ template_name $/style.cssに

.popover {
    background-color: white;
    border: 2px solid #A10C27;
    border-radius: 5px;
    padding: 5px;
    width: 500px;
}

ウェブサイトでの結果の画像：

enter image description here

2
Benjamin Röhling

Bootstrapツールチップによって生成されるベースHTMLは次のようになります。

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

トリガーされると、外側のdivは、ポジションクラス（top、bottom、leftまたはright）とfadeおよびin：

<div class="tooltip fade top in">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Tooltip Text</div>
</div>

ブラウザーのインスペクターツールで「強制状態：ホバー」を使用しても、対応するcssクラスが見つかりません。

インスペクターで状態を変更しても、JavaScriptはトリガーされません。代わりに、これをコンソールに入力してツールチップを表示できます。

jQuery('#example').tooltip('show');

どこ #exampleは、ツールチップを含む要素のセレクターです。このコードを実行すると、ツールチップが生成され、そのマークアップがインスペクターに表示されます。

1
Sharky