jQuery всплывающая подсказка onClick?

Question

Я давно искал и, похоже, не могу найти плагин для всплывающей подсказки jQuery, который использует следующее:

onClick (вместо hover, заставляя его работать как тумблеркнопка)
Fade In / Fade Out

Идея использования всплывающих подсказок состоит в том, что у меня есть несколько ссылок, в которых я хочу отображать контент. В то время как обычные всплывающие подсказки (возможно, именно здесь я ошибся ..)предназначены для зависания, это должен был быть тот, который был переключен нажатием на ссылку, запускающую его.

Есть ли лучшие идеи для этого, чем использование всплывающей подсказки?

Answer 1

Я не знаю, как вы выглядите, но быстрый поиск в Google для подсказки jquery дал мне http://flowplayer.org/tools/tooltip/index.html (уже некоторое время использую их прокручиваемый плагин, очень нравится:)

с их сайта:

jQuery Tooltip позволяет полностью контролировать, когда всплывающая подсказка будет показана или скрыта.Вы можете указать разные события для разных типов элементов.Вы можете управлять этим поведением с помощью переменной конфигурации событий, которая по умолчанию имеет следующие значения:

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
}

, используя 'click', чтобы добиться цели.(Я не проверял это)

однако, если все остальное терпит неудачу, вы все равно можете подделать его с помощью 'скриптового API', просто вызовите .show () и .hide ()

Редактировать:

Поскольку щелчок, щелчок не работают точно так, как я думал, я предлагаю вам обходной путь.Я действительно надеюсь, что есть более хороший способ достичь того же результата.Я протестировал его с локальной копией http://flowplayer.org/tools/tooltip/index.html, и он работает, как и ожидалось.

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();
});

Но я предлагаю вам взглянуть на qTip, как было предложено user834754, вам может понравиться больше.

Answer 2

Можно открыть всплывающую подсказку jQuery UI (jQuery UI версия 1.10.2) по событию щелчка. Добавьте атрибут title к элементу, отличному от элемента, для которого должна отображаться подсказка.

<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 -->

Инициализировать всплывающую подсказку для элемента, у которого есть атрибут заголовка с позицией, установленной для целевого элемента.

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

Вызов open в подсказке в функции обратного вызова события click на целевом элементе.

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

Источник: Всплывающее окно справки с подсказкой jQuery UI

Answer 3

вы можете попробовать использовать qTip, вы можете привязать к нему любое событие jquery:

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

Простой и красивый плагин :) http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 4

Вы также можете сделать:

$("#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();
});

Answer 5

Если вы предпочитаете простую, легкую подсказку, вы можете рассмотреть http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/, а затем просто связать с ней событие onclick jquery.