I'm trying to set the position of the tooltip in Joomla 3.9.8.

I've used:


At the top of the document. I then have field set as:

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

This works fine. It displays the team abbr and when I mouseover it, it displays the team name.

The only problem is that it displays it way too low before the field. It appears, based on Google DevTools that it automatically calculates a fixed position. This position needs to be 47 pixels right and 40 pixels higher.

I tried using the offset parameter code in the Joomla Docs to no avail:

// set x (horizontal) distance to 20 pixels, y (vertical) distance to 30 pixels

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

1 Answer 1


Firstly, I'll just point out that behavior.tooltip which is based on the JHtmlBehavior class, is old and deprecated, so I will base my answer on the newer Bootstrap tooltips.

Take the following HTML markup:

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

You can then utilise the JHtmlBootstrap class method, like so:

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

You can set the placement to one of the following:

  • top
  • bottom
  • left
  • right

If you require some additional functionality, there is an extended tooltip method, which will inject a CSS and JS file.

You can acheieve this by also adding:


This will give you the following additional positions:

  • top-left
  • top-right
  • bottom-left
  • bottom-right
  • auto-dir (Will reverse the position if your site uses an RTL language)

An example, would be this:

JHtml::_('bootstrap.tooltip', '.hasTooltip', ['placement' => 'auto-dir bottom-left']);
  • I'm getting a syntax error in my editor (Aptana 3) for the ['placement' => 'right']. Is that the correct syntax for this? I can't seem to find anything on the Joomla page for bootstrap.tooltip, only behavior.tooltip Oct 2, 2019 at 15:35
  • I simply changed this to a jQuery popover to get the desired results, but I'm still interested in the correct syntax. Oct 2, 2019 at 15:44
  • Try replacing ['placement' => 'right'] with array('placement' => 'right'). Square braces were added in PHP 5.4 so it could be that you're on PHP 5.3
    – Lodder
    Oct 2, 2019 at 16:42
  • That resolved the editor, but did not display the tooltip. I have "JHtml::_('bootstrap.tooltip', '.hasTooltip', array('placement' => 'right'));" and to display the field, I used "<div class="hasTooltip" title="Some Title Here">Display Text</div>" Oct 3, 2019 at 18:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.