Hello Support Team,
I encountered an issue with the YT Shortcodes plugin where tooltips were causing a JavaScript error:
Uncaught TypeError: $(...).tooltip is not a function.
Upon investigation, it was clear that the problem stemmed from jQuery UI not being loaded, which resulted in tooltip() being undefined. Additionally, there was a syntax error caused by mismatched curly braces {} in the Accordion Block and Tooltip Block, which caused the script to fail.
I'm running Joomla 5.2.3 and YT Shortcodes version: 5.0.0. I checked this on my current template as well as Cassiopeia and the error persists.
I collaborated with ChatGPT and came up with the following solution.
I updated the shortcodes.js file to ensure proper handling of jQuery UI and fixed the syntax error by combining the Accordion Block and Tooltip Block under a single jQuery(document).ready function.
Solution Steps:
Combined the Accordion Block and Tooltip Block into a single jQuery(document).ready function.
Added a check for jQuery UI and dynamically loaded it if missing.
Fixed curly brace alignment to ensure proper script execution.
----------------------
/* Accordion Block */
jQuery(document).ready(function($) {
$("ul.yt-accordion li").each(function() {
if ($(this).index() > 0) {
$(".yt-accordion-inner").hide();
$(".enable+.yt-accordion-inner").show();
$(".enable+.yt-accordion-inner").addClass("active");
} else {
$(".enable").addClass('active');
}
var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";
$(this).children(".accordion-heading").bind(event, function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).siblings(".yt-accordion-inner").removeClass("active").slideUp(350);
} else {
$(this).addClass("active");
$(this).siblings(".yt-accordion-inner").addClass("active").slideDown(350);
}
$(this).parent().siblings("li").children(".yt-accordion-inner").slideUp(350);
$(this).parent().siblings("li").find(".active").removeClass("active");
});
});
/* Tooltip Block */
if (typeof $.ui === 'undefined' || typeof $.fn.tooltip === 'undefined') {
console.warn('jQuery UI or tooltip is not available. Loading...');
$.ajax({
url: "
code.jquery.com/ui/1.12.1/jquery-ui.min.js",
dataType: "script",
success: function() {
console.log('jQuery UI loaded successfully.');
initTooltips();
},
error: function() {
console.error('Failed to load jQuery UI.');
}
});
} else {
console.log('jQuery UI is already loaded.');
initTooltips();
}
function initTooltips() {
$("[data-placement='top']").tooltip({ placement: 'top' });
$("[data-placement='bottom']").tooltip({ placement: 'bottom' });
$("[data-placement='left']").tooltip({ placement: 'left' });
$("[data-placement='right']").tooltip({ placement: 'right' });
console.log('Tooltips initialized.');
}
});
--------------------------------
This is currently in place for now on my site, but this should definitely be addressed and corrected if wrong for future releases.
Thank you!
Adina
