jQueryUI tooltip Виджет для показа всплывающей подсказки на клике

Как новый виджет всплывающей подсказки jQueryUI может быть изменен, чтобы открыть всплывающую подсказку при событии клика на документе определенного элемента, в то время как другие все еще показывают свой tootip при событии mouseover. В открывшемся клике всплывающую подсказку следует закрыть, щелкнув в другом месте документа.

Это вообще возможно?

10

7 ответы

В предыдущем ответе не используется 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");   
  }
});

You can check it using http://jsfiddle.net/adamovic/A44EB/

25
добавлено
BTW, этот код исправлен с этой проблемой поведения с зависанием, я так думаю
добавлено автор Mladen Adamovic, источник
Проблема с этим решением заключается в том, что как только вы открываете всплывающую подсказку один раз через клик, после этого он будет принимать зависание.
добавлено автор Dologan, источник
Это не работает для меня. У меня есть bootstrap 3.03, и я получаю ошибку в подражательной версии «ncaught TypeError: e [c] не является функцией« какие-либо предложения? Его ошибка происходит на открытом
добавлено автор yardpenalty, источник

Этот код создает всплывающую подсказку, которая остается открытой, пока вы не выйдете за пределы всплывающей подсказки. Он работает даже после отклонения всплывающей подсказки. Это разработка ответа Младена Адамовича .

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");
    }
});
8
добавлено

jsfiddle http://jsfiddle.net/bh4ctmuj/225/

Это может помочь.

<!-- HTML --> 
      Click me to see Tooltip      
 <!-- jQuery code--> 

    $('a').tooltip({          
     disabled: true,
     close: function( event, ui ) { $(this).tooltip('disable'); }
    });

  $('a').on('click', function() {
     $(this).tooltip('enable').tooltip('open');
   });
7
добавлено
Я улучшил и обновил ответ на future.readers. Хотя предыдущий ответ работал, но он использовал другую пользовательскую библиотеку
добавлено автор Garry, источник
Спасибо, но я preffer хотел бы использовать виджет всплывающей подсказки, потому что это обеспечило бы мой код простым. Тем не менее, ваше предложение по-прежнему является планом резервного копирования, если это невозможно сделать с помощью собственного виджета jQueryUI. Итак, кто-нибудь?
добавлено автор besq, источник

Этот ответ основан на работе с разными классами. Когда событие click происходит на элементе с классом «trigger», класс изменяется на «trigger on», и событие mouseenter запускается, чтобы передать его jQuery ui.

В этом примере Mouseout отменяется, чтобы сделать все на основе событий кликов.

HTML

<input id="input_box1" /> <button id="trigger1" class="trigger" data-tooltip-id="1" title="bla bla 1"> ?</button>

<input id="input_box2" /> <button id="trigger2" class="trigger" data-tooltip-id="2" title="bla bla 2"> ?</button>

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

http://jsfiddle.net/AK7pv/111/

6
добавлено

Сегодня я играю с этой проблемой, я решил поделиться своими результатами ...

Используя пример из всплывающей подсказки 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');
            }

        })

    });

The first part is more or less a direct copy of the code example from UI site with the addition of items and content in the tooltip block.

My HTML:

   

<input class='hidden' id="age" /> Click me ya bastard

<div class="myPopover hidden">

Hi Sten this is the div

</div>

Bacially we trick the hover state when we click the anchor tag (fireTip class), the input tag that holds the tooltip has a mouseover state invoked, thus firing the tooltip and keeping it up as long as we wish... The CSS is on the fiddle...

Anyways, here is a fiddle to see the interaction a bit better: http://jsfiddle.net/AK7pv/

4
добавлено

Обновление ответа Младена Адамовича имеет один недостаток. Он работает только один раз. Затем всплывающая подсказка отключена. Чтобы он работал каждый раз, когда код должен дополняться подсказкой инструментального инструмента.

 $('#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");   
  }
});
3
добавлено

Эта версия гарантирует, что всплывающая подсказка остается видимой достаточно долго, чтобы пользователь мог перемещать мышь над всплывающей подсказкой и оставаться видимым до мышки. Удобен для того, чтобы пользователь мог выбрать текст из всплывающей подсказки.

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

Test

Sample: http://jsfiddle.net/A44EB/123/

2
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda