store nearby url and insert into tooltip with jQuery

I have some jQuery that makes these images expand on hover and a tooltip with the image title appears.

http://jsfiddle.net/nathanbweb/7juZY/5/

(It's two separate plugins; yes, I'm sure there's a more efficient ideal way. But that's not my question.) Is there an easy way to insert a "More Info" link into this tooltip that matches the "More Info" link already under the thumbnail?

I think it will end up looking something like this:

$(".tooltip").append(' '<a href="' + thelink + '">More Info</a>' ');

but 开发者_高级运维I'm so bad with variables I need help storing the link from one location (at ul>li>a ) and then re-using it in the append.

Yes, something like this would do.

var thelink;
thelink = $(this).find("a").attr("href");
$(".tooltip").append('<a href="' + thelink + '">More Info</a>');

I don't think there's need to use the tooltip plugin, you got it almost right in your code (the commented part) just do a little research on variables in javascript and how to use them.

edit: i down't know what happens when the tooltip gets created after the hover fired, i guess it won't work then, i would suggest to use something like the code below on hover to create the tooltip.

var title, tooltip, thelink, moreinfo;

thelink = $(this).find("a").attr("href");
moreinfo = $('<a href="' + thelink + '">More Info</a>');
title = $(this).find("img").attr("title");
tooltip = $("<div class='tooltip'>" + title + "</div>");

tooltip.append(moreinfo);
$(this).append(tooltip);

You can't have an <a></a> tag inside a title attribute. I would recommend having jQuery grab the title and display it in a Div then position the Div over the box you are hovering over.