Jquery 使cluetip键盘可访问（显示在选项卡焦点上）

我正在努力弄清楚如何在使用悬停的触发器文本链接的焦点上显示。我需要它的工作时，标签（焦点）通过内容的可访问性的目的

<script>
$(function(){    

  $('a.tip').cluetip({width:200, local:true, cursor:'pointer', sticky: true,closePosition: 'title', arrows: true, titleAttribute:   'title', showTitle:true });
  $(".tip-content").hide();        

  $('a.tip').focus(function() {   
    $(this).click();
  });

});
</script>

$（函数（）{
$（'a.tip'）.cluetip（{width:200，local:true，cursor:pointer，sticky:true，closePosition:title，arrows:true，titleAttribute:title，showttitle:true}）；
$（“.tip content”）.hide（）；
$（'a.tip'）.focus（函数（）{
$（此选项）。单击（）；
});
});

HTML:

工具提示内容

---

完全沮丧。看起来这应该是一件简单的事情，但我运气不好

如果您想让它工作，您需要将

激活

属性添加到clueTip调用中，如下所示：

$('a.tip').cluetip({activation: 'click', width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true });

这样，您的代码应该可以工作，但是您的clueTips只会在单击时触发，而不会在悬停时触发

编辑： 为了保持悬停效果，并且由于clueTip没有任何方法以编程方式显示提示，我认为您将需要两个插件调用，一个带有

激活：“单击”

，另一个没有：

$('a.tip').cluetip({activation: 'click', width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true });
$('a.tip').cluetip({width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true });

---

这样，悬停和单击时提示将弹出，这样，通过链接的选项卡将触发焦点事件，从而触发单击。

如果您希望它工作，则需要将

激活

属性添加到clueTip调用中，如下所示：

$('a.tip').cluetip({activation: 'click', width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true });

这样，您的代码应该可以工作，但是您的clueTips只会在单击时触发，而不会在悬停时触发

编辑： 为了保持悬停效果，并且由于clueTip没有任何方法以编程方式显示提示，我认为您将需要两个插件调用，一个带有

激活：“单击”

，另一个没有：

$('a.tip').cluetip({activation: 'click', width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true });
$('a.tip').cluetip({width:200, local:true, cursor: 'pointer', sticky: true, closePosition: 'title', arrows: true, titleAttribute: 'title', showTitle: true });

---

这样，鼠标悬停和单击时提示将弹出，这样，通过链接的选项卡将触发焦点事件，从而触发单击。

谢谢，但不幸的是，我希望鼠标用户保持悬停状态，并允许键盘用户进行焦点或onclick。在这种情况下，如果我们尝试将其清除，您可能需要一些clueTip方法来在通话中显示提示，但我恐怕没有这样的方法：/也就是说，您可以使用两个clueTip通话，一个使用click activation，另一个不使用click activation。这不是世界上最干净的东西，但它可能会起作用。请参见编辑。谢谢，但不幸的是，我希望鼠标用户保持悬停状态，并允许键盘用户进行焦点或onclick。在这种情况下，如果我们试图使其干净，您将需要一些clueTip方法在通话中显示提示，但恐怕没有这样的事情：/也就是说，您可以使用两个clueTip通话，一个有点击激活，另一个没有点击激活。这不是世界上最干净的东西，但它可能会起作用。请参见编辑。好奇的是，注意到您在这里设置了标题属性-您是否也使用该属性作为工具提示效果？出于可访问性的原因，通常不鼓励使用标题，因为键盘用户无法显示标题。标题用于设置工具提示的标题。这就是clueTip的工作原理：加油。（这实际上看起来是个不错的主意；如果JS被禁用，那么至少标题会出现在hover上，因为标题就是这样工作的——但它仍然存在其他标题问题。）因此，clueTip本身似乎存在一些可访问性问题；需要使用标题，并且本身不能通过键盘访问。所以真正的问题是：如何使这个插件更容易访问。理想的做法可能是“子类”或等效的，并添加一个焦点/模糊处理程序，该处理程序将转发到其现有的mouseenter/leave处理程序。好奇的是，注意到您在这里设置了title属性-您是否也使用该属性来实现工具提示效果？出于可访问性的原因，通常不鼓励使用标题，因为键盘用户无法显示标题。标题用于设置工具提示的标题。这就是clueTip的工作原理：加油。（这实际上看起来是个不错的主意；如果JS被禁用，那么至少标题会出现在hover上，因为标题就是这样工作的——但它仍然存在其他标题问题。）因此，clueTip本身似乎存在一些可访问性问题；需要使用标题，并且本身不能通过键盘访问。所以真正的问题是：如何使这个插件更容易访问。理想的方法可能是“子类”或类似的方法，并添加一个焦点/模糊处理程序，将其转发到现有的mouseenter/leave处理程序。