Question

I’m doing some Mac development in a WebView. I want to expand URLs that have been shortened by a url shortener, and display that expanded URL to the user. So, given a link whose src attribute is set to http://is.gd/xizMsr, when the user hovers over the link I want the title tooltip to display http://google.com

My link tag looks like this:

<a href="http://is.gd/xizMsr" onMouseOver="myFunction(this);">Here's a shortened link to google</a>

And here’s the relevant javascript, which will use XMLHttpRequest to fetch the expanded URL and then update the title

var myRequest;
var mousedOverElement;
var isLoading = false;

function myFunction(anObject) {
  if (isLoading == false) {

    isLoading = true;
    mousedOverElement = anObject;
    var link = anObject.getAttribute('href');
    var encodedURL = encodeURI(link);
    var url = 'http://is.gd/forward.php?format=simple&shorturl=' + encodedURL;

    myRequest = new XMLHttpRequest();
    myRequest.open("GET", url);
    myRequest.onreadystatechange = onStateChange;
    myRequest.send();
  }
}

function onStateChange()  {
    if (myRequest.readyState==4) { 
        if (myRequest.status==200) {   
            mousedOverElement.setAttribute('title',myRequest.responseText);
        }

        isLoading = false;
    }
}

The problem is, when I hover over the link, and then stop moving the cursor, the title attribute is set properly, but the tooltip is not shown. I have to move the mouse again to make the tooltip show up. I don’t necessarily have to move the cursor off of the link and then back over it, but simply moving a few pixels while remaining hovered over the link will do the trick.

I know that the title is being set properly from a combination of using the Web Inspector and the Javascript debugger in Safari. In fact, pretty much as soon as I hover over the link, I see the Web Inspector’s view of the DOM in the “elements” tab update with the new title. But, if I take my hand off of the mouse, the tooltip never shows.

My assumption here is that WebKit only shows a tooltip when the user is moving the mouse. Is there a way to sort of “wake up” webkit, even if the cursor is not moving? Or am I better off implementing this with some of my own DHTML-ish magic instead of relying on the title attribute?

Answer 1

What about an element (move it over the anchor) or a wrapper (positive z-index) with a transparent background which will (onmouseover):

1. first add the anchor’s title (you will have to modify your function)
2. and then change its (negative for the covering element) z-index (effectively putting the anchor in the foreground)

This way the title will be readily available. If necessary you can add a setTimeout() between step 1 and 2.

Or you could simply use setAttributeNode to modify the title attribute value.