使用onclick jQuery激活工具提示 [英] Activate tooltip using onclick jQuery

问题描述

我正在测试工具提示插件，它将在鼠标悬停时显示工具提示.我正在尝试使工具提示与onclick一起显示，这很麻烦，需要您的帮助.

I'm testing a tooltip plugin and it will display a tooltip on mouseover. I'm trying to make the tooltip appear with an onclick, which I'm struggling and need your help.

我当前正在使用一个jquery片段，因此，当单击工具提示中的链接时，由于@pointy，它将激活一个模式窗口. jQuery可以包含这样的东西吗?

I'm currently using a jquery piece so it will activate a modal window, thanks to @pointy, when the links within the tooltip is clicked. Can something like this be included with jQuery?

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

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

Here is the page code that calls the functionality and tooltip content

<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"时，它将在鼠标悬停时激活工具提示.还包括一个(我选择的)复合类，它将调用工具提示内容

As shown below, when a link includes a reserved class "showTip", it will activate the tooltip on mouseover. Also included is a compound class (of my choice) that will call the tooltip content

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

以下是使工具提示起作用的逻辑:工具提示逻辑

Here's the logic that makes the tooltip work: Tooltip logic

推荐答案

基本上，您需要做的所有事情都类似

basically all you would need to do it something like

$('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
});

这篇关于使用onclick jQuery激活工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！