Delayed Tooltips for Link Images

Using the Music Free template on http://allbluesdance.com/, I have a lot of image-based external links, each using text, image and (Extra Field) Target URL from a K2 Item. Only when the mouse has hovered over one of those images for a second or two I'd like to display a tooltip with the image caption and/or credits from that K2 Item, and possibly an external link to the original full-size image. Better still if the tooltip could fade in gracefully. I'm already using a hacked K2 Item sub-template, so I can grab the caption and credits and insert the code for generating the tooltip inside that sub-template

If there's already something available like that in the template that would be outstanding. Otherwise, I'm looking for a recommendation for a plug-in or something. Some of the likely-looking Joomla plugins are based on jQuery, including JU Tooltip, which looks very promising. Should I avoid jQuery in general, or in any case is there a more likely solution for this?

Hi,
your images have only ALT , you forgot about TITLE - it you talk about Tooltips from both, nobody have power to control it , only browser settings can do that. So you won't be able to override(!) the default browser behaviour. To have this effect you'd have to create your own version of this behavior with JavaScript which then you can control.

but please read about solutions here: http://stackoverflow.com/questions/7928 ... hout-delay

Yes, we're definitely into JavaScript territory. I'm not quite up to speed on JavaScript, so I was hoping for a plugin or at least a sample script and a clue how to apply it.

To illustrate what I'm looking for: It turns out that JU Tooltip will in fact give me the tooltip I want, but it can't be applied to any item that has a link. For some reason JU Tooltip is called with an <a> tag, as in:

<a class="jutooltip">Item with tooltip</a> <div style="display: none;">Tooltip text or HTML</div>

Near as I can tell, if that "Item with tooltip" is replaced with HTML that contains a hyperlink, the HTML parser -- or whatever -- sees nested links and separates the tooltip from the underlying item.

On this page (right now) the left image has no actual link, and the JU Tooltip shows up just the way I want: delayed, faded-in and semi-transparent. As a bonus, the tooltip serves as a link to the original version of the photograph.

The next image is the same code, just with a link wrapped around the image. That link works, but the link and image have been kicked out of the <a class="jutooltip">...</a> structure, so there's nothing visible that's associated with the potential tooltip.

So that's what I'm trying to get. I realize it might be too much to ask that the tooltip be a separately-clickable island within the overall image, which is linked to somewhere else. The tootip could certainly point in from outside the image, so long as it appear inside the window, or at very least wholly inside the page. Or I could live without the link from the tooltip to the original image.

sorry, but I'm not a javascript developer to help you, anyway.
your question is also about customization not template support.

Well, now I'm trying to implement Bootstrap tooltips, and I'm not sure what steps are already included in your template and where to add them if they aren't. According to http://hwdmediashare.co.uk/blog/228-bootstrap-jhtml-library-joomla-3-0:

"Firstly, we must import the Joomla library file:
jimport('joomla.html.html.bootstrap');"

Is that is already done, and if not where would I add that code?

Then it says:

"To start, you must activate the tooltip behavior. This is done with the following line of code:
JHtml::_('bootstrap.loadtooltip', 'content', array());"

Is that already taken care of, and if not, where would that code go?

Then:

"Here, 'content' is the ID of the element in which you want to activate tooltips"

Do you think "ID" is meant to mean a Class? Or do you think it's actually asking for the ID of some large section or whatever in which you can then set up tooltips?