Question

我正在努力弄清楚如何在使用悬停的触发器文本链接的焦点上显示jQuery cluetip。为了便于访问，我需要通过内容选项卡（onfocus）来工作。

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

HTML：

<a id="load-local" class="tip" href="#cc" rel="#cc" title="Tooltip">Tooltip link</a>
<span class="tip-content" id="cc">Tool tip content</span>

非常沮丧。这似乎应该是一件简单的事情，但我没有运气。

Answer 1

如果你想让它工作，你需要将activation属性添加到clueTip调用中，如下所示：

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

这样，您的代码应该可以正常工作，但您的线索只会在点击时触发，而不会在悬停时触发。

EDITED：为了保持悬停效果，并且由于clueTip没有任何方法以编程方式显示提示，我认为您将需要两个插件调用，一个使用activation: 'click'而另一个没有它的人：

$('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键盘可访问（显示在标签焦点上）

1 个答案: