SmartAddons - Responsive Joomla Templates - Forum Kunena Site Syndication https://www.smartaddons.com Thu, 13 Feb 2025 05:38:46 +0000 Kunena 1.6 https://www.smartaddons.com/components/com_kunena/template/ytcvn/images/icons/rss.png SmartAddons - Responsive Joomla Templates - Forum https://www.smartaddons.com/ en-gb Subject: JavaScript error: Uncaught TypeError: $(...).tooltip is not a function. - by: AdinaG https://www.smartaddons.com/forum/358-yt-shortcode-plugin/53965-javascript-error-uncaught-typeerror-tooltip-is-not-a-function#53965 https://www.smartaddons.com/forum/358-yt-shortcode-plugin/53965-javascript-error-uncaught-typeerror-tooltip-is-not-a-function#53965 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]]>
YT Shortcode Plugin Wed, 12 Feb 2025 18:03:08 +0000 https://www.smartaddons.com/forum/358-yt-shortcode-plugin/53965-javascript-error-uncaught-typeerror-tooltip-is-not-a-function#53965