it-swarm-ja.tech

JHTML :: _( 'behavior.tooltip')—ツールチップの位置を設定します

Joomla 3.9.8でツールチップの位置を設定しようとしています。

私は使用しました:

JHTML::_('behavior.tooltip');

ドキュメントの上部。次に、フィールドを次のように設定します:

<?php
echo JHTML::tooltip($standings[$k][$k3][$k4]['team_name'], '', 
            '', $standings[$k][$k3][$k4]['team_abbr']);
?>

これは正常に動作します。チームのabbrが表示され、マウスオーバーすると、チーム名が表示されます。

唯一の問題は、フィールドの前の低すぎる位置に表示されることです。 Google DevToolsに基づいて、固定位置を自動的に計算するようです。この位置は右47ピクセル、高さ40ピクセルである必要があります。

Joomla Docsのオフセットパラメータコードを使用してみましたが、役に立ちませんでした:

// x(水平)距離を20ピクセルに、y(垂直)距離を30ピクセルに設定します

$toolTipArray = array('offsets'=>array('x'=>-47, 'y'=>40), 
'maxtitlechars'=>40);
JHTML::_('behavior.tooltip', '.customOffset', $toolTipArray);
3

まず、私はbehavior.tooltipJHtmlBehaviorクラスに基づいており、古くて非推奨であるため、新しいBootstrapツールチップに基づいて回答を行います。

次のHTMLマークアップを取り上げます。

<a href="#" title="The text for the tooltip">Some link</a>

その後、次のようにJHtmlBootstrapクラスメソッドを利用できます。

JHtml::_('bootstrap.tooltip', '.hasTooltip', ['placement' => 'left']);

placementを次のいずれかに設定できます。

  • 正しい

いくつかの追加機能が必要な場合は、CSSおよびJSファイルを挿入する拡張ツールチップメソッドがあります。

これを追加するには、以下を追加します。

JHtml::_('bootstrap.tooltipExtended');

これにより、次の追加のポジションが得られます。

  • 左上
  • 右上
  • 左下
  • 右下
  • auto-dir(サイトで[〜#〜] rtl [〜#〜]言語を使用している場合は位置が逆になります)

たとえば、次のようになります。

JHtml::_('bootstrap.tooltipExtended');
JHtml::_('bootstrap.tooltip', '.hasTooltip', ['placement' => 'auto-dir bottom-left']);
3
Lodder