3

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

I've used:

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

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

<?php
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), 
'maxtitlechars'=>40);
JHTML::_('behavior.tooltip', '.customOffset', $toolTipArray);
3

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:

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

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.tooltipExtended');
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 – Charles Wilkins IV Oct 2 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. – Charles Wilkins IV Oct 2 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 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>" – Charles Wilkins IV Oct 3 at 18:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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