jQuery tooltip onClick?

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.

Answer 2

It is possible to open a jQuery UI tooltip (jQuery UI version 1.10.2) on a click event. Add title attribute to an element other than the element on which the tooltip is to be displayed.

<span id="helpbutton" title="This is tooltip text">Help</span> <!-- tootltip would be displayed on click on this -->
<input id="inputbox"></input> <!-- help to be displayed for this element -->

Initialize the tooltip on the element that has title attribute with position set to the target element.

$("#helpbutton").tooltip({position: {of: "#inputbox", at: "right"}});

Call open on the tooltip in the callback function of the click event on the target element.

$("helpbutton").click(function() {
    $("#helpbutton").tooltip("open");
});

Source : Floating help box with jQuery UI tooltip