Print
Category: Tutorials
Hits: 2028
27Mar2023

Troubleshoot: title/picture/link disappears after a mouse over

Information
First published May 25, 2021
2028 hits - No rating

You may find yourself in a situation where, while testing the set up of a Simplify Your Web extension (for instance), every single time you mouse over a title, an image or a link, that element disappears. What is happening here?

While very strange, there is a simple explanation: most likely, the element that disappears is showing a tooltip and you have encountered an incompatibility between the way Joomla 3 creates and shows tooltips with jQuery (mechanism used by all Simplify Your Web extensions) and the way Joomla 2.5 used to create and show tooltips with MooTools.

MooTools (more precisely mootools-more.js) sets the element's CSS property display: none after a mouse over. That is why it disappears. 

How can this be fixed?

For that second solution, add the following CSS to your template:

.hasTooltip { display: inherit !important; }

This will prevent any element to ever disappear again (hasTooltip is the class used by Joomla 3 to signal that there is a tooltip associated with the element).

One last advice/solution: avoid extensions that still load MooTools for their own functionality. These extensions have not evolved with Joomla and still use Joomla 2.5's old ways to do things. Although MooTools is still present for backward compatibility, there is no reason why those extensions could not update their code over the past (almost) 9 years to be 100% compatible with the way Joomla 3 is running.