Bootstrap and Photonic Issue

There is no issue with jQuery (at least the standard version of jQuery).

Regarding tooltip, this is the only code that I changed:

$(document).tooltip({
	items: '.title-display-tooltip a, .photonic-slideshow.title-display-tooltip img',
	track: true,
	show: false,
	hide: false
});

I have the above in photonic.js at present, and it used to be this:

$(document).on('mouseover', '.title-display-tooltip a, .photonic-slideshow.title-display-tooltip img', function() {
	$(this).tooltip({
		track: true,
		show: false,
		hide: false,
		content: function() {
			if ($(this).data('title') != undefined && $(this).data('title') != '') {
				return photonicHtmlDecode($(this).data('title'));
			}
			return photonicHtmlDecode($(this).attr('title'));
		}
	});
});

The reason for the change was that the original code (i.e. the second snippet) resulted in buggy behavior with the tooltip (hovering would sometimes show the regular tooltip, then when you came out of the element and hovered again, it would show the correct tooltip). The fix is as per the documentation for jQuery Tooltip (see here), which doesn’t need you to specify a selector option.

Photonic uses jQuery Tooltip bundled with WordPress, but from your site it seems like Bootstrap has a version of Tooltip that conflicts with what WP provides (it would seem like it, based on this as well, which is a different tooltip script). If that is the case, the fix really should be at your theme / Bootstrap’s end, because it will cause any plugin using native WP jQuery tooltips to break.

Basically you have two options:

1. I don’t know if your theme gives you an option to exclude the Tooltip script. If not, and if you are handling things in a child theme then you can fix this by removing the entire tooltip function from here. From your site it doesn’t seem like you are using that functionality anyway.
2. Alternatively you could replace the new function with the old one I had.

From my point of view reintroducing the old code would be to reintroduce buggy behaviour, and it is not possible for me to detect if you are using bootstrap, because it defines no unique JS function.

Also, see this: https://stackoverflow.com/questions/23428285/bootstrap-and-jqueryui-conflict. Apparently if your theme ensures that it is loading jQuery Tooltip before Bootstrap, all should be well, and you will not need to change either JavaScript file.

Basically your theme will have a call to wp_enqueue_script to load the custom bootstrap.js file, and it can add jquery-ui-tooltip as a predecessor.

No I don’t think so theme allows to exclude tooltip.

Lemme try to find if I can find the file that is calling bootstrap and jquery function and then I will overwrite the function using child theme.

Reverting your code to old does not make sense it will change again once there is any update in your plugin and as u said old code is ambiguous.

I will try to avoid if it can be.

Thanks for the help.

The theme you are using seems to have not been updated since the past 2 years, however I think the file with the function call is front.php.

It’s the resource.php I think where all external js scripts mentioned. I try to call bootstrap function after all other it’s still seems same.
You can see the behaviour of website now that slider is gone and mobile menu is not loading as well.

• This reply was modified 8 years ago by mpsaini.

What is the line you have to call the bootstrap script? Simply placing it later will not help.

This is for bootstrap call:

wp_enqueue_script( ‘bootstrap’, $dir . ‘/assets/js/bootstrap.js’, array( ‘jquery’ ),
null, true );

Please change it to this:

wp_enqueue_script( 'bootstrap', $dir . '/assets/js/bootstrap.js', array( 'jquery', 'jquery-ui-tooltip' ), null, true );

Should not we declare before bootstrap?

The third parameter of wp_enqueue_script is that of dependencies. See here. Whatever you specify in the array will be automatically loaded earlier by WP.

Hmmmmm, made the changes but issue still persist.

Is your theme actively maintained? If so, I would advise reaching out to them for this conflict.

Otherwise, the suggestion to delete the code from the bootstrap.js file should probably still work.

I am not sure if it’s actively maintained but theme default plugin are maintained actively.

I highly doubt but I will see if I can get some help from them. But thank you for all the help.

OK – I am marking this “Resolved”, because there isn’t anything to change at Photonic’s end. Please feel free to reopen if the issue persists after the appropriate theme modifications have been made.

I tried to remove the tooltip code from bootstrap.js file but that also did not help.

But If I revert your code then it starts working. So do you think is there any other way if your plugin can use alternate names or function ?

How about Tooltip noconflict mode ?

I have staged the environment at https://onpointvolunteers.org/sandbox

Similar results. I can provide you access to staging env if you want to take a look at code ?

• This reply was modified 8 years ago by mpsaini.
• This reply was modified 8 years ago by mpsaini.