Question

I have a javascript tooltip that I’d like to call a jquery modal window (by colorbox) when the link is clicked from within the tooltip. Each link has class="modalPageWide" assigned to it. The class modalPageWide is what calls the jquery modal window.

The problem is when any of the links within Example 1 is assigned modalPageWide and clicked, it does not call the jquery modal window. Can someone solve what I need to do for my final piece?

Here is a demo and my code: http://jsbin.com/ijeku4/4/

Jquery code:

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

Tooltip Code:

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.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'
    }
}

Answer 1

The problem is probably that your initialization code cannot affect the tooltip contents because they’re not in the DOM at the time the initialization happens. They’re only added when the tooltip is shown. I don’t know what tooltip plugin that is, but if there’s a way to add a callback to it that is invoked when the tooltip is shown, then you could put your initialization code in there.

edit — OK now that I can see that tooltip plugin, it looks like you can give it an “on_show” function in the options:

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

This may need to be tweaked, depending on how that tooltip thing works. (I looked it over but I didn’t thoroughly walk through it all.) If the tooltip contents are re-added to the DOM on each activation, then this will probably be OK; if, however, the tooltip sticks around, and depending on what “colorbox” does, it may be necessary to keep track of whether the tooltip DOM fragment has already been “colorboxed”.