Dynamically Adding Tooltips to External Links

[akvbroek]

I am a newbie to javascript. I work for an academic institution that can't really afford to hire real programmers so they are asking us to do our best. I manage a large site (5000+ pages).

Recently, one of the "higher-ups" decided that we should have a notification BEFORE someone clicks a link that exits our domain.

The simplest method I could think of was to add a tooltip to all our external links.

The problem is that I do not have the time or the man power to edit all of those links. What I would like to do is have a bit of javascript that could dynamically add a tooltip to all of the anchor tags that link to something other than our domain WITHOUT needing to manually add anything to the HTML tags themselves.

All of my attempts at writing a script for this have failed miserably. I have found little on the web that helped. Most scripts I have found seem to add fancy divs and such. I would like to simply add "title="This link will take you outside of the **** Website" to all external links.

Any ideas? Thanks!!!

 

[BillyRayPreachersSon]

I'm not sure that using the title attribute would work very effectively, as there's always a delay between hovering over the link and the title appearing. I don't know about your users, but as a power user, if I'm going to click on a link, I don't wait around over it to see if there's a nice title or not - I click and go.

However, there are several other options available to you:

- Use some sort of DHTML tooltip code where you have control over this delay (and so can remove it)

- Decorate all the links with an alert if the target domain is not the same (note: this snippet uses very basic checking which could be erroneous in some situations):

<script type="text/javascript">

	window.onload = decorateExternalLinks;

	function decorateExternalLinks() {
		var currentDomain = document.domain;

		var links = document.links;
		for (var loop=0; loop<links.length; loop++) {
			var link = links[loop];
			if (link.href.indexOf(currentDomain) == -1) link.onclick = showExternalWarning;
		}
	}

	function showExternalWarning() {
		return window.confirm('You are about to leave this page!');
	}

</script>

- Use the window's onunload event to detect which link was clicked, then perform the same sort of check as the script above.

- Do nothing, and don't treat your users like children. I'm sure they know what they're doing, and so don't need a nanny.

Personally, I'm in favour of the last one, because I hate it when websites try to somehow subvert my surfing process. I'm the user, I know what I'm doing, so leave me to do it. For that reason, I think you should tell your 'higher-up' that it's a crap idea - I certainly would if I were asked to add this feature to any site.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[feherke]

Hi

Sometimes a Wikipedia-like mark for external links can be handy. Personally I would add this to my style sheet :

a[href^="[URL unfurl="true"]http://"[/URL]]:after,
a[href^="[URL unfurl="true"]https://"[/URL]]:after {
  content: url(external.png);
}

Note that
[ul]
[li]I assume that internal links are specified without protocol[/li]
[li]I ignore browsers which not implement CSS 3[/li]
[li]I agree with Dan, "it's a crap idea"[/li]
[/ul]


Feherke.

http://rootshell.be/~feherke/

 

[akvbroek]

Thanks so much for the input!

I ended up using css attribute selectors to add a little icon to all external links.

I definitely agree with the comments about not having any thing for external links. Unfortunately, I don't get the final say on such things.

Thanks for all the help!!

If anyone comes by this thread and wants to know what I did, here is the CSS code:

div#content a[href^='[URL unfurl="true"]http://'[/URL]] { background: url(external.png)  no-repeat center right;  padding-right: 13px;}
div#content a[href^='[URL unfurl="true"]https://'[/URL]] { background: url(external.png)  no-repeat center right;  padding-right: 13px;}
div#content a[href*='ourdomain'] { background: transparent;  padding-right: 0px; }
div#content a[href^='mailto'] { background: url(mailto.png)  no-repeat center right;  padding-right: 13px;}