I am using the jquery ui tooltip extension. Given a link (level 1) of class "tooltips" it generates a tooltip whose content is a link (level 2), and since that link (level 2) also has class tooltips, it generates another tooltip (level 3) whose content is a link whose text is link= and the href of the original level 1 link.

So far so good. That much I want. (the original hrefs are very long, so I don't want them to appear in level 2)

What I want to do is not have that level 3 link generate another tooltip. How can I stop propagation at that level. I tried a variety of selectors, but nothing worked.

//  modified from https://stackoverflow.com/a/15014759https://stackoverflow.com/a/15014759
$( document ).tooltip({
      show: null, // null = show immediately 
      items: '.tooltips',
      tooltipClass: 'tooltipstyle',
        content: function () {
                  return "<a class='tooltips' target='_blank' href='" + $(this).prop('href')+ "' title='link=" + $(this).prop('href') + "' >" + $(this).prop('title')  + "</a>" ;
              },
        hide: {
        effect: "", // fadeOut
      },
      open: function( event, ui ) {
        ui.tooltip.animate({ left: ui.tooltip.position().left - 25 }, "slow" );
      },
      close: function( event, ui ) {
        ui.tooltip.hover(
            function () {
                $(this).stop(true).fadeTo(1600, 3); 
                //.fadeIn("slow"); // doesn't work because of stop()
            },
            function () {
                $(this).fadeOut("1600", function(){ $(this).remove(); })
            }
        );
      }
    });