Question

我正在WebView中进行一些Mac开发。我想扩展已被网址缩短器缩短的网址，并将扩展的网址显示给用户。因此，如果链接的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来获取扩展的URL，然后更新标题

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属性设置正确，但工具提示未显示。我必须再次移动鼠标才能显示工具提示。我不一定要将光标移离链接然后再将其移回，但只需移动几个像素，同时保持悬停在链接上就行了。

我知道通过在Safari中使用Web Inspector和Javascript调试器的组合正确设置了标题。事实上，就在我将鼠标悬停在链接上时，我看到Web Inspector在“元素”选项卡中的DOM视图会更新为新标题。但是，如果我把手从鼠标上移开，工具提示就不会显示出来。

我的假设是WebKit仅在用户移动鼠标时显示工具提示。有没有办法解决“唤醒”webkit，即使光标没有移动？或者我最好用我自己的一些DHTML-ish魔法实现这个，而不是依赖于title属性？

Answer 1

你说

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

可能是因为当您启动鼠标悬停时标题不存在，它无法显示任何工具提示（没有任何内容可显示）。因此，不会出现工具提示。当您再次移动鼠标时，这次它具有title属性，因此它可以显示工具提示。你可以做的不多，它只是浏览器的工作方式。

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

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

Answer 2

一个元素（在锚点上移动）或一个带有透明背景的包装器（正z-index）将会是什么... onmouseover）：

首先添加主播的标题（您必须修改您的功能）
然后更改它（覆盖元素为负）z-index（有效地将锚点放在前景中）

通过这种方式，标题将随时可用。如有必要，您可以在步骤1和2之间添加setTimeout()。

或者您只需使用setAttributeNode修改title属性值。

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

2 个答案: