Can I make simple global tooltips in WordPress?

4 Views

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…

Read More
<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!

Post Views: 4

Related posts

Leave a Reply

2 comments

  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…