JQuery onClick tooltip?

Question

I searched for a long time and cannot find the jQuery tooltip plugin that uses the following:

onClick (Instead of hover , so that it works like a toggle button)
Fade in / fade out

The idea of ​​using tooltips is that I have several links to which I want to display content. While the usual tooltips (probably where I did wrong). To freeze, this had to be what was switched by clicking on the link that started it.

Are there any better ideas for this than using a tooltip?

Answer 1

I don’t know what you looked like, but a quick search for jQuery google hint gave me http://flowplayer.org/tools/tooltip/index.html (I used my scrollable plugin for some time, really :)

from your site:

The jQuery Tooltip allows you full control when the tooltip is shown or hidden. You can specify different events for different types of elements. You can control this behavior with events, which has the following default values:

 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 have not tested it)

however, if all else fails, you can still fake it using the "script api", just call .show () and .hide ()

Edit:

Since click, click does not work exactly as I thought it would be, I offer you a workaround. I really hope that there is a better way to achieve the same result. 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, you might like more.

Answer 2

In the click event, you can open the jQuery UI tooltip (jQuery UI version 1.10.2). Add a title attribute to the element other than the element on which the tooltip should 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 a tooltip for an element with a title attribute with the position given to the target element.

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

Open the tooltip in the click event callback function on the target element.

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

Source: Floating help panel with jQuery UI hint

Answer 3

u can try using qTip, u can bind any jquery event to it:

 show: { when: { event: 'click' } } 

Simple and beautiful plugin :) http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 4

if you prefer a simple easy hint, you can consider http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ and then just bind the onclick jquery event to it.

Answer 5

You can also do:

 $("#myTooltip").tooltip().off("mouseover").on("click", function() { if ($(this).attr("visible") === "1") { $(this).attr("visible", "0"); return $(this).tooltip("close"); } else { $(this).attr("visible", "1"); return $(this).tooltip("open"); } }).on("mouseleave", function(event) { return event.stopImmediatePropagation(); });