Activate tooltip using onclick jQuery

问题

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.

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?

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

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

回答1:

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
});

来源：https://stackoverflow.com/questions/5008226/activate-tooltip-using-onclick-jquery

标签

javascript

jquery

tooltip