JQuery всплывающая подсказка, но по щелчку вместо наведения

Question

Мы использовали атрибуты title для отображения чего-либо при наведении курсора. Мы хотим, чтобы это теперь отображалось по клику. Как я могу получить плавающую рамку, которая выглядит как заголовок / всплывающая подсказка, но может отображаться и скрываться по требованию вместо привязки к наведению?

Answer 1

Если вы хотите написать код вручную, это должно сделать работу:

HTML:

<div id="tooltip" style="display:none;">bla bla</div>

<div id="yourLink">Click here to show the tooltip!</div>

И JS:

$('#yourLink').click(function(){
  $('#tooltip').toggle();
});

Вам просто нужно правильно оформить подсказку div

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

Answer 2

Хотелось бы добавить к ответу iftrue, что вы можете получить (и удалить) атрибут title в событии mouseenter и поместить его обратно в отпуск мыши. Это позволяет браузеру не отображать указатель мыши, но по-прежнему использует атрибут для хранения текста.

Answer 3

Возможно, вы захотите попробовать эту библиотеку:

http://craigsworks.com/projects/qtip/

А затем просто вызовите .qtip для обработчика событий .click.

$('#myInput').click(function(){/*insert qtip code here*/});

Примечание: вы можете динамически захватить атрибут заголовка, чтобы использовать это содержимое во всплывающих подсказках qtip, если вы того пожелаете.