Topic: jquery.ui .tooltip() not working

Author

Posts
May 18, 2015 at 2:35 pm #276281

geoffmartyn
Participant

Hi – I’ve been trying to get tooltips to work all day today. It’s not the kind that are built in to X, as I’m not using shortcodes and I have some custom pages output as part of a store locator plugin. Anyway – I don’t think it’s anything to do with the store locator plugin, I just think there’s some other kind of conflict.

I tried http://iamceege.github.io/tooltipster/ and also http://qtip2.com/ – then finally I moved onto jQuery.ui and enqueued that along with everything else that was required.

I can even do a test

if(jQuery.ui) {
// something here
}

….which it passes. I just can’t tell it to apply any of the jQuery.ui to any element.

Is there some kind of block on this type of functionality due to the structure of X-Theme?

Thanks

Geoff

p.s. I’m using:

X 3.2.5 / running the Integrity stack
WP 4.2.2

May 18, 2015 at 7:05 pm #276448

Lely
Moderator

Hello Geoff,

Thanks for posting in.
If you are using simple tooltips you don’t need jquery.ui. It can be achieve through CSS.
To assist you with this issue, it would be better if you provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

May 19, 2015 at 3:33 am #276715

geoffmartyn
Participant

Thanks – sorry, I should have done this. The URL is http://quickfindme.wpengine.com/martin

Do a search for London, then click the first result. The four boxes on the right have a tooltip on them now, but I had to hack it by including a CDN link to jQuery UI as I think by using a custom template based on one of the blank, no header no footer it looks like the WP header isn’t being called in.

So this is a temp fix, and it looks like it’s ok, but in the background the page doesn’t start with the proper <html> <head> section, it simply starts at <header>

I can supply login info if you want, including FTP details – if that would help.

Thanks

Geoff

May 19, 2015 at 6:25 am #276799

Paul R
Moderator

Hi Geoff,

Yes please, we need the following info so we could take a closer look

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

May 20, 2015 at 11:58 am #277918

geoffmartyn
Participant

This reply has been marked as private.

May 20, 2015 at 4:37 pm #278157
Rad
Moderator
Hi there,

FTP Login won’t work.

For the meantime, please remove this code.
```
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
```
You can’t do that, wordpress has it’s own enqueue for that. Instead, add this code at your child theme’s functions.php
```
add_action('wp_enqueue_scripts', 'jQuery_UI_Scripts');
function jQuery_UI_Scripts () {
wp_enqueue_style( 'jquery-ui-style', '//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' );
wp_enqueue_script('jquery-ui', '//code.jquery.com/ui/1.11.4/jquery-ui.js', array('jquery'), '1.11.4');
}
```
Hope this helps.
May 21, 2015 at 2:56 pm #278901

geoffmartyn
Participant

Hi – I’m very sorry about that. I should have said, it’s SFTP rather than FTP.

Thanks for the enqueue snippet – I know you can’t do that in WP, but I was using it to prove or disprove that the built-in jQuery wasn’t working. However, I’ve commented out that block and used your enqueue code in the functions file, but it looks like tooltip() won’t work now. The only way I can get this to work is by including jquery-1.10.2.js, but obviously that conflicts with the version loaded by WP

I think at this stage, I’m probably just looking for a steer on how to do the tooltip using CSS and if this is something you guys have setup on X or if you mean just general CSS?

Thanks again

Geoff

May 21, 2015 at 9:48 pm #279135

Lely
Moderator

Hello Geoff,

Please check this shortcode for popovers and tooltip:
http://theme.co/x/demo/integrity/1/shortcodes/popovers-and-tooltip/

Hope this helps.
Thanks.
Author

Posts