Как новый виджет подсказки jQueryUI может быть изменен, чтобы открыть всплывающую подсказку в событии клика на определенном элементе в документе, в то время как другие все еще показывают свой tootip при событии mouseover. В открывшемся клике всплывающую подсказку следует закрыть, щелкнув где-то еще в документе.
Возможно ли это вообще?
jsfiddle http://jsfiddle.net/bh4ctmuj/225/
Это может помочь.
<!-- HTML -->
<a href="#" title="Link Detail in Tooltip">Click me to see Tooltip</a>
<!-- Jquery code-->
$('a').tooltip({
disabled: true,
close: function( event, ui ) { $(this).tooltip('disable'); }
});
$('a').on('click', function () {
$(this).tooltip('enable').tooltip('open');
});
В предыдущем ответе не используется jqueryui и его довольно сложно.
Это работает:
HTML:
<div id="tt" >Test</div>
JS:
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
Вы можете проверить это, используя http://jsfiddle.net/adamovic/A44EB/
Этот код создает всплывающую подсказку, которая остается открытой, пока вы не выйдете за пределы всплывающей подсказки. Он работает даже после отклонения всплывающей подсказки. Это разработка ответа Младена Адамовича.
Fiddle: http://jsfiddle.net/c6wa4un8/57/
код:
var id = "#tt";
var $elem = $(id);
$elem.on("mouseenter", function (e) {
e.stopImmediatePropagation();
});
$elem.tooltip({ items: id, content: "Displaying on click"});
$elem.on("click", function (e) {
$elem.tooltip("open");
});
$elem.on("mouseleave", function (e) {
e.stopImmediatePropagation();
});
$(document).mouseup(function (e) {
var container = $(".ui-tooltip");
if (! container.is(e.target) &&
container.has(e.target).length === 0)
{
$elem.tooltip("close");
}
});
Этот ответ основан на работе с разными классами. Когда событие click происходит на элементе с классом "триггер", класс изменяется на "trigger on", и событие mouseenter запускается, чтобы передать его на jquery ui.
В этом примере Mouseout отменяется, чтобы сделать все на основе событий кликов.
HTML
<p>
<input id="input_box1" />
<button id="trigger1" class="trigger" data-tooltip-id="1" title="bla bla 1">
?</button>
</p>
<p>
<input id="input_box2" />
<button id="trigger2" class="trigger" data-tooltip-id="2" title="bla bla 2">
?</button>
</p>
JQuery
$(document).ready(function(){
$(function () {
//show
$(document).on('click', '.trigger', function () {
$(this).addClass("on");
$(this).tooltip({
items: '.trigger.on',
position: {
my: "left+15 center",
at: "right center",
collision: "flip"
}
});
$(this).trigger('mouseenter');
});
//hide
$(document).on('click', '.trigger.on', function () {
$(this).tooltip('close');
$(this).removeClass("on")
});
//prevent mouseout and other related events from firing their handlers
$(".trigger").on('mouseout', function (e) {
e.stopImmediatePropagation();
});
})
})
Сегодня я играю с этой проблемой, я решил поделиться своими результатами...
Используя пример из всплывающей подсказки jQueryUI, пользовательский стиль и пользовательский контент
Я хотел иметь гибрид этих двух. Я хотел иметь возможность иметь popover, а не всплывающую подсказку, а содержимое должно быть настраиваемым HTML. Таким образом, нет состояния зависания, но вместо этого нажмите состояние.
Мой JS выглядит так:
$(function() {
$( document ).tooltip({
items: "input",
content: function() {
return $('.myPopover').html();
},
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
$('.fireTip').click(function () {
if(!$(this).hasClass('open')) {
$('#age').trigger('mouseover');
$(this).addClass('open');
} else {
$('#age').trigger('mouseout');
$(this).removeClass('open');
}
})
});
Первая часть представляет собой более или менее прямую копию примера кода с сайта пользовательского интерфейса с добавлением элементов и содержимого в блок всплывающей подсказки.
Мой HTML:
<p>
<input class='hidden' id="age" />
<a href=# class="fireTip">Click me ya bastard</a>
</p>
<div class="myPopover hidden">
<h3>Hi Sten this is the div</h3>
</div>
Батально мы обманываем состояние зависания, когда мы нажимаем тег привязки (класс FireTip), тег ввода, который содержит всплывающую подсказку, вызывает вызванное пользователем действие мыши, тем самым вызывая всплывающую подсказку и сохраняя ее до тех пор, пока мы хотим... CSS находится на скрипке...
В любом случае, вот скрипка, чтобы увидеть взаимодействие немного лучше: http://jsfiddle.net/AK7pv/
Обновление ответа Младена Адамовича имеет один недостаток. Он работает только один раз. Затем всплывающая подсказка отключена. Чтобы он работал каждый раз, когда код должен дополняться подсказкой инструментального инструмента при нажатии.
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("enable"); // this line added
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
Эта версия гарантирует, что всплывающая подсказка останется видимой достаточно долго, чтобы пользователь мог перемещать мышь над всплывающей подсказкой и оставаться видимым до мыши. Удобный способ разрешить пользователю выбирать текст из всплывающей подсказки.
$(document).on("click", ".tooltip", function() {
$(this).tooltip(
{
items: ".tooltip",
content: function(){
return $(this).data('description');
},
close: function( event, ui ) {
var me = this;
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function(){
$(this).remove();
});
}
);
ui.tooltip.on("remove", function(){
$(me).tooltip("destroy");
});
},
}
);
$(this).tooltip("open");
});
HTML
<a href="#" class="tooltip" data-description="That's what this widget is">Test</a>
Пример: http://jsfiddle.net/A44EB/123/