web-dev-qa-db-ja.com

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);
joomla-3.xphpphp7
3
Charles Wilkins IV

まず、私はbehavior.tooltipはJHtmlBehaviorクラスに基づいており、古くて非推奨であるため、新しい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