Safari -在鼠标悬停时通过XMLHTTPRequest更新链接的标题？

Question

我正在用WebView做一些Mac开发。我想扩展已被url缩写程序缩短的URL，并将扩展后的URL显示给用户。因此，给定一个src属性设置为http://is.gd/xizMsr的链接，当用户将鼠标悬停在该链接上时，我希望标题工具提示显示http://google.com

我的链接标签看起来像这样：

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

下面是相关的javascript，它将使用XMLHttpRequest来获取扩展的网址，然后更新标题

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

问题是，当我将鼠标悬停在链接上，然后停止移动光标时，title属性设置正确，但没有显示工具提示。我必须再次移动鼠标才能显示工具提示。我不一定要将光标从链接上移开，然后再移回链接上，但只需移动几个像素，同时将鼠标悬停在链接上就可以做到这一点。

我知道标题是通过结合使用Web Inspector和Safari中的Javascript调试器来正确设置的。实际上，只要我将鼠标悬停在该链接上，就会在"elements“选项卡中看到Web Inspector的DOM视图，并使用新标题进行更新。但是，如果我把手从鼠标上移开，工具提示永远不会显示。

这里我的假设是，WebKit只在用户移动鼠标时显示工具提示。有没有办法在光标不动的情况下“唤醒”webkit？或者，与依赖title属性相比，使用我自己的一些DHTML魔术来实现这一点是不是更好？

Answer 1

如果元素(将其移动到锚点上)或具有透明背景的包装器(正z索引)将(onmouseover)：

1. 首先添加主播的标题(您必须修改您的函数)
2. ，然后更改其(覆盖元素为负) z-index (有效地将主播放在前台)

这样，标题就可以很容易地获得。如有必要，您可以在步骤1和步骤2之间添加setTimeout()。

或者，您可以简单地使用setAttributeNode修改title属性值。

Answer 2

你说过

“问题是，当我将鼠标悬停在链接上，然后停止移动光标时，标题属性设置正确，但没有显示工具提示。”

很可能是因为当您开始鼠标悬停时标题还不存在，所以它不能显示任何工具提示(没有什么可显示的)。因此不会出现任何工具提示。再次移动鼠标时，这一次它确实具有title属性，因此它可以显示工具提示。对此你无能为力，这只是浏览器的工作方式。

相反，您可以尝试使用jQuery工具提示：http://www.reynoldsftw.com/2009/03/10-excellent-tooltip-plugins-with-jquery/

使用jQuery，您应该能够控制它，以便在设置标题时立即显示工具提示。