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