Can I make simple global tooltips in Wordpress?

Question

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!

Answer 1

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).

Answer 2

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...