使用onclick jQuery激活工具提示

时间:2011-02-15 18:59:51

标签: javascript jquery tooltip

我正在测试工具提示插件,它会在鼠标悬停时显示工具提示。我正试图让工具提示出现onclick,我正在努力并需要你的帮助。

我正在使用一个jquery片段,因此当点击工具提示中的链接时,感谢@​​pointy,它将激活一个模态窗口。这样的东西可以包含在jQuery中吗?

演示:http://jsbin.com/eliwa3

以下是调用功能和工具提示内容的页面代码

<script>
dw_Tooltip.defaultProps = {
  sticky: true,
  klass: 'tooltip',
  showCloseBox: true,
  klass: 'tooltip2', // class to be used for tooltips
  closeBoxImage: 'http://www.google.com/apps/images/x.png',
  wrapFn: dw_Tooltip.wrapSticky

};

dw_Tooltip.on_show = function() {
   $(".modalPageWide").colorbox({
      width:"800px",height:"610px",opacity:0.6,iframe:true
   })
};


dw_Tooltip.content_vars = {

tooltip_popup: {
        content: 'Click a link to continue' +
'<ul><li><a href="http://www.amazon.com" class="modalPageWide">Link 1</a></li>' +
'<li><a href="http://www.amazon.com" class="modalPageWide">Link 2</a></li>' +
'<li><a href="http://www.amazon.com" class="modalPageWide">Link 3</a></li>' +
'<li><a href="http://www.amazon.com" class="modalPageWide">Link 4</a></li></ul>',
        klass: 'tip'
    }
}
</script>

如下所示,当链接包含保留类“showTip”时,它将在鼠标悬停时激活工具提示。还包括一个复合类(我选择),它将调用工具提示内容

<a href="#" class="showTip tooltip_popup">Example</a>

以下是使工具提示有效的逻辑:Tooltip logic

1 个答案:

答案 0 :(得分:0)

基本上所有你需要做的事情就像

$('a.tooltip_popup').click(function(e){
    e.preventDefault();//so link doesn't take you to where ever it's supposed to
    //code that brings the tooltip up
});