Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

We wish to have ALL external links within a Wordpress site have a simple mouseover tooltip without having to place a title tag or rel or class tag within it. I've tried several methods using the $('a[href=http]') selector but can not for the life of me get anything to work.

Here is the code I came up with that does work in a standard HTML page but can't get it to work within Wordpress. In theory this sounds so simple: find all external links and when moused over display this tooltip text...

<script type="text/javascript">
$(document).ready(function() {

var changeTooltipPosition = function(event) {
  var tooltipX = event.pageX - 8;
  var tooltipY = event.pageY + 8;
  $('div.tooltip').css({top: tooltipY, left: tooltipX});
};

var showTooltip = function(event) {
  $('div.tooltip').remove();
  $('<div class="tooltip">Clicking this link will exit this site.</div>')
        .appendTo('body');
  changeTooltipPosition(event);
};

var hideTooltip = function() {
   $('div.tooltip').remove();
};

$('a[href*=http]').bind({
   mousemove : changeTooltipPosition,
   mouseenter : showTooltip,
   mouseleave: hideTooltip
});
});</script>

ANY help with this would be unbelievably appreciated!

share|improve this question
    
I think this should be moved to SO. –  kaiser Jun 26 '11 at 19:19

2 Answers 2

If your code is working in general, but not in WP then this is very likely caused by jQuery being run in no conflict mode by WP.

You will need to use appropriate wrapper to use it as usual (with $ sign).

share|improve this answer
    
Hi, I tried your suggestion but still no love. Maybe i'm just approaching this from the wrong angle. As mentioned, there's all kinds of tooltip plugins but they all want you to include a title tag in the <a> tag. I'm trying to avoid doing this since it's very time consuming to go back and edit all the content and external links to insert that title tag. I'm hoping there's a solution that simply binds this message/tooltip to the specified target urls. –  Simco Jun 27 '11 at 0:02

Here you go:

(function($){
  $.fn.tips = function(){
    return this.each(function(i){
      var title = $(this).attr('title'),
          url = 'http://s.wordpress.com/mshots/v1/' + encodeURIComponent($(this).attr('href')) + '?w=400',
          message = 'By clicking this you are leaving my website :(',
          webshot = $('<div><p>' + message + '</p><img src="' + url + '" width="400" alt="' + title + '" /></div>').css({
            position: 'absolute',
            left: -20000,
            textAlign: 'center',
            color: '#ffffff',
            backgroundColor: 'rgba(0,0,0, 0.4)',
            padding: 10,
            zIndex: 40
          }).hide().appendTo(document.body);

      return $(this).mouseover(function(){
        webshot.show();
      }).mousemove(function(kmouse){
        webshot.css({
          left: kmouse.pageX + 15,
          top: kmouse.pageY + 15
        });
      }).mouseout(function(){
        webshot.hide();
      });

    });

  };

})(jQuery);

jQuery(document).ready(function($){ 
  // all links except the ones which reference starts with # or http://localhost
  $('a:not([href^="http://localhost"], [href^="#"])').tips();
});    

(change localhost with your site address)

Thumbnails are retrieved from wordpress.com

I made this originally for a ping listing inside a theme, so if you're using this for all links, it might be a better idea to create the webshots on mouse over, not directly after document has loaded...

share|improve this answer
    
Thanks for this but not sure it's what i'm in need of. Basically I don't want external links to show images of the destination. All I want is for any external link to display a warning message "clicking this link will exit this site" in a tooltip without having to manually add this as a title tag to each external link (since 99% of the tooltip plugins display the title tag contents which is not what we want). I'm looking for a method that will detect all external links and when moused over the warning message displays. Ideas on that one? –  Simco Jun 26 '11 at 23:46
    
then simply remove <img src="' + url + '" width="400" alt="' + title + '" /> from the code above and you get only the message... –  onetrickpony Jun 26 '11 at 23:57
    
another idea - if you want system tooltips: $('a:not([href^="http://localhost"], [href^="#"])').attr('title', 'Clicking this link will exit this site'); –  onetrickpony Jun 26 '11 at 23:59
    
Ok, i'll try these. I've been inserting my code into the header.php file just before the </head> tag. Should I place this elsewhere? For example, there's functions.php and scripts.php. –  Simco Jun 27 '11 at 0:45
    
Ok, your second suggestion, i placed that in the header.php and it worked! I'm not certain where to place the other function code, however, so wasn't able to get that to work. Now, when the tooltip pops up it's basically the standard browser based one. Can this be styled using your code snippet? Or, is that where the function needs to be present since it contains the styling? Thanks for your help. You have no idea how little hair I have left after working on this for 2 days. –  Simco Jun 27 '11 at 0:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.