Employees link on tooltip

Hi, I’m using Sidney theme, and I have noticed that on the employees image, during mouse hover, a description tooltip appears, but if I try to click anything happens. My question is: is it possible to add a link on the employees image or on the tooltip, to go directly to employee page? Only the employee name is linked to employee page.
I hope you understand, sorry for my english. Thank you in advance fot your reply.
Miriam

Hello Miriam,

To accomplish it, please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

jQuery(function($) {

  if( $('.sydney_employees_widget').length ) {
      $('.team-item').each(function(){
        var link = $(this).find('.name a').attr('href');

        if(link != undefined) {
          $(this).find('.pop-overlay').wrapInner('<a href="'+link+'"></a>');
          $(this).find('.avatar').wrapInner('<a href="'+link+'"></a>'); 
        }
        
      });
  }   

});

  1. Update

Ensure you clear all caches before reloading your site.

Regards,
Kharis

1 Like

Thank you very much Kharis, now it works!! Wonderful!
Best regards
Miriam

You’re most welcome here!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi,

i also needed this script, thank you!

But I also want to get rid of the red box at mouse hover. Is it possible? It’s mostly annoying on mobile version.

Thanks!

My site: http://www.kultschlitten.at/

To get rid of the box overlay, you’ll need to add this CSS code to Appearance > Customize > Additional CSS from dashboard.


.sydney_employees_widget .pop-overlay {
  display: none;
}

Regards,
Kharis

Hi kharis,
I’m working with the free version and tried to add the JS code you mentioned. Putting it in the “Custom CSS & JS” PlugIn did not have any effect. It worked with the TS Custom Java Plugin but regrettfully the social Media Icons as well as the picture now are corrupt. Is this due to the free version of Sydney or did I do something else wrong? (See in the employee section here: http://soundpic.tim-o.com). Thanks for your help.
Cheers, Timo

Hello,

I wanted the same (have the employees picture clickable) and with this plugin and the script it works just fine

Thanks a lot!
Isatix

@DarkClown,

Viewing the source code of your site. I didn’t find the custom jQuery code I’ve suggested. Please re-apply it, so I can inspect what’s exactly stopping it.

Regards,
Kharis

Hi Kharis, I activated the JS Code again … you should be able to see the problem now …
Thanks in advance.

Hello there,

It looks like it’s working fine. See the below screencast.

Try clearing your web browser’s cache/history, and try again.

Regards,
Kharis

Hi Kharis,
thank you for your effort and mail. The screenshot you send me shows exactly the problem. The link on the picture itself works completely fine (as hoped and expected). But the original hover picture without th JS code looks like this:

As you can see there is text in the hover picture and the social media links are shown correctly (unlike in the “JS active” screencast you showed). Once the JS is applied all of this (as shown in your screencast) does not work any more. I will enable th JS again if that helps you to figure out the reason for this behaviour.
Thanks again for your excellent support!!
Cheers,
Timo

Hello there,

It happened because of the default link color is orange. To set black to the new link sticks on hover box, add this CSS code to Appearance > Customize > Additional CSS from dashboard. Sorry just noticed it :frowning:

    .roll-team .team-item .pop-overlay a {
      color: rgb(2, 2, 2) !important;
    }

Regards,
Kharis

Perfect! Works fine … I just wonder why the JS changed the color of the hover state … ?!
Thanks again for the great support!

As the JS code adds a link tag that wraps the entire hover box, all contents color inside becomes orang as well – follows the link color you’ve set in the customizer.

You’re welcome! Glad to have an opportunity to assist you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

I followed your directions, but I’m still having issues with this not working.

www.nauvoomegaconf.org/speakers

Thank you in advance.

Hello there,

For Employee Type B which has different markup, use this jQuery code instead.

    jQuery(function($) {

      if( $('.sydney_employees_b_widget').length ) {
          $('.team-item').each(function(){
            var link = $(this).find('.name a').attr('href');

            if(link != undefined) {
              $(this).wrapInner('<a href="'+link+'"></a>');
            }

          });
      }

    });

Regards,
Kharis

That is still not working.

Hello there,

I checked the code once again and it works as expected on my test site. Could you please remove all of your custom JS code and keep this one remains?

    jQuery(function($) {

      if( $('.sydney_employees_b_widget').length ) {
          $('.team-item').each(function(){
            var link = $(this).find('.name a').attr('href');

            if(link != undefined) {
              $(this).wrapInner('<a href="'+link+'"></a>');
              $(this).find('.avatar').wrapInner('<a href="'+link+'"></a>');
            }

          });
      }

    });

Clear any applied cache before reloading your site as it usually blocks recent changes or code additions to take effect in the front end.

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Hi there! Sorry to resurrect an old thread but I have tried this to no avail. I have also cleared up my cache and tried on my partner’s computer and it still does not work.

Here is the site: https://acravocats.com

For what it’s worth, I have also tried to adjust the number of employees seen on the widget by using this trick: Sydney Theme: how to display 4 employees on one row

This change did not show up on my own computer (even after a cache clean up) but did work on my partner’s machine… What am I doing wrong?

As always, thank you so much for you help,
-A