Should be simple....but

[simcoweb]

I'm running a Wordpress site and we want all the external links to automatically have a mouseover tooltip style message display a simple line of text. But for some reason i'm having a ridiculous time getting this to work.

 

1) I need to find/locate all external links. I'm using a plugin that actually adds the rel="external" to all links that don't match the base url of the site already. Therefore, i've tried using that as the selector: $('a[rel=external]') which is supposed to look for all 'a' elements that have the rel="external" reference.

 

2) It needs to then append (or insert) the title tag (if missing, which 99.9999% of them are) for the mouseover text. That is, unless there's another way to display the message without having to insert the title tag? I tried appending a hidden div and couldn't get that to work either. So, the title tag (or whatever method we use) should be inserted between <a href="#"> and </a>. Tried using append but that goes at the end, not the middle.

 

3) Then create hover effect that would display the title tag contents on mouseover.

 

I've tried multiple methods and can't get any results. Not a JQuery guru but learning. Any help is appreciated!

 

 

[ignace]

@1 Add an alert to both statements, I'm 99.99% sure the a[rel=external] is run before the plugin that adds the rel="external" or add a .delay() to a[rel=external]

@2 .attr('title', node.attr('title') + '')

@3 There are plugins that already do this check the Plugin section on jQuery.com

[simcoweb]

First, thanks for the response! I did try several of the available JQuery plugins from the repository. The problem is that most of them trigger off an attribute of the element itself. Typically an #id or using a title= tag.

 

Basically i'm looking for a 'global' solution that would identify ALL the external links and display either a hidden div or simple text string that is part of the JQuery code. If I can use $('a[href*=http]') so it simply finds all links that aren't relative and, when moused over, displays a simple text string like "clicking this link will exit this site" as a tooltip (of displays a hidden div).

 

What we want to avoid is having to go back and manually insert either a title tag, a rel tag, a class tag, etc. to all the hyperlinks (there's literally a 1000 or more) and want to make it easier for the future admin to add external links without worrying about all the extra details they'd have to embed into each one.

 

Since Wordpress already loads the jQuery library, I came up with this bit of code that would create the <div> displaying the tip using the appendTo function and this works perfectly in a standard HTML document (see http://www.simcomedia.com/tooltips-demo.html ) but won't work when I paste it into Wordpress. The question is...why? Here's the code:

 

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

 

I'm under a crazy deadline trying to get this done. Any help would be unbelievably appreciated!