Question

I have been looking for a long time now and can’t seem to find a jQuery tooltip plugin that utilizes the following:

onClick (Instead of hover, making it work like a toggle button)
Fade In/Fade Out

The idea for using tooltips is that I have a few links which I want to display content in. While normal tooltips (this is probably where I went wrong..) are for hovering, it needed to be one that was toggled by clicking on the link triggering it.

Are there better ideas for this than using a tooltip?

Answer 1

I don’t know how you’ve been looking but a quick google search for jquery tooltip gave me
http://flowplayer.org/tools/tooltip/index.html (been using their scrollable plugin for some time now, really like it 🙂

from their site:

jQuery Tooltip allows you to fully control when the tooltip will be
shown or hidden. You can specify different events for different types
of elements. You can control this behaviour with the events
configuration variable which has following values by default:

events: {
  def:     "mouseenter,mouseleave",    // default show/hide events for an element
  input:   "focus,blur",               // for all input elements
  widget:  "focus mouseenter,blur mouseleave",  // select, checkbox, radio, button
  tooltip: "mouseenter,mouseleave"     // the tooltip element
}

using ‘click’ should do the trick. (I didn’t test it)

however, if all else fails you can still fake it by using the ‘scripting api’, just call .show() and .hide()

Edit:

Since click, click doesn’t work exactly as I thought it would, I offer you a workaround.
I really hope that there’s a nicer way to achieve the same result though.
I tested it with a local copy of http://flowplayer.org/tools/tooltip/index.html and it works as expected.

var tooltip = $("#dyna img[title]").tooltip({
    events: {
      def:     ",",    // default show/hide events for an element
      tooltip: "click,mouseleave"     // the tooltip element
    },
   // tweak the position
   offset: [10, 2],
   // use the "slide" effect
   effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });

tooltip.click(function() {
    var tip = $(this).data("tooltip");
    if (tip.isShown(true))
        tip.hide();
    else
        tip.show();
});

But I suggest you take a look at qTip as suggested by user834754 as well, you might like it more.