JQuery UI tooltip html со ссылками

Я хочу использовать подсказку jQuery UI.

В подсказке я хочу, чтобы в html была ссылка.

Я видел этот пост (подсказка JQuery UI не поддерживает html-контент), в котором говорится, как работать с html внутри всплывающей подсказки.

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

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

Что я могу сделать?

Спасибо.

UPDATE:

  $(function () {
      $(document).tooltip({
          content: function () {
              return $(this).prop('title');
          }
      });
  });

Пример: http://jsfiddle.net/jLkcs/

Ответ 1

Из-за характера подсказки jQuery UI невозможно из коробки.

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

Используемые api docs: http://api.jqueryui.com/tooltip/

код:

$(function () {
    $(document).tooltip({
        content: function () {
            return $(this).prop('title');
        },
        show: null, 
        close: function (event, ui) {
            ui.tooltip.hover(
            function () {
                $(this).stop(true).fadeTo(400, 1);
            },    
            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                })
            });
        }
    });
});

Демо: http://jsfiddle.net/IrvinDominin/jLkcs/5/

Ответ 2

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

Или в качестве альтернативы вы можете посмотреть всплывающую подсказку twitter bootstrap и popover, я думаю, что из памяти вы можете передать тип триггера события в popover.

http://getbootstrap.com/2.3.2/javascript.html#popovers

Ответ 3

Ирвин Доминин принял ответ, это была огромная помощь для меня в этом. Я расширил его, если у кого-то есть те же дополнительные требования, которые у меня были.

Я также хотел поместить задержку на всплывающую подсказку. Поскольку для параметра "показать" было установлено значение "null", мне нужно было его реплицировать. (для параметра show option установлено значение null, чтобы остановить всплывающее окно, видимо перерисовывающееся, когда мышь перемещается из всплывающей подсказки обратно к вызывающей ссылке).

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

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

Отказ от ответственности: я не мастер в JQuery, и, возможно, будет намного проще реплицировать это. Иногда я застрял в кроличьих кодах, поэтому код ниже может быть плохим советом...

var ttWait; // global variable for tooltip delay
$(document).tooltip({
    items: '.userSummaryLink',
    show: null,
    content: function() {  // build the popup content
        return $(this).prop('title');
    },
    open: function (event, ui) { // simulating the show option (that needs to be null to stop the popup closing and reopening when user mouses from popup back to source
        var el = $(event.originalEvent.target);
        if( !el.data('tooltip') ) { // only put open delay if SAME popup not already open
            ui.tooltip.hide(); // stop popup opening immediately
            ttWait = setTimeout(function() { // show popup after delay
                el.data("tooltip", true); // acknowledge popup open
                ui.tooltip.fadeIn("400");
            }, 250);
        }
    },
    close: function (event, ui) {
        var el =  $(event.originalEvent.target);
        el.data("tooltip", false); // acknowledge popup closed (might be over-ridden below)
        clearTimeout(ttWait); // stop tooltip delay function
        ui.tooltip.hover(
            function () {
                $(this).stop(true).fadeTo(400, 1);
                el.data("tooltip", true); // acknowledge popup still open
            },

            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                });
            });
    }
});

Обратите внимание, что я также добавил некоторые классы и позиционировал свои всплывающие окна, чтобы поместить стрелку в вызывающую ссылку. Кроме того, мой контент был получен из файла пользовательских объектов, загруженного на страницу. Я удалил их, надеюсь, упростил их использование.