JQuery Tooltib плагин / так запутался в выборе / извините за дубликат - PullRequest
Новая
       22

JQuery Tooltib плагин / так запутался в выборе / извините за дубликат

0 голосов
/ 27 апреля 2011

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

Я работал над этим несколько дней без какого-либо хорошего результата ...

для этой цели я не могу использовать следующие приятные плагины, потому что они не поддерживают html (средний div или span под триггером), и мы должны установить атрибут title для получения всплывающей подсказки:

среднее bassistance или qtip2

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

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

извините за дубликат, я был бы очень признателен за помощь в этом ...

1 Ответ

1 голос
/ 27 апреля 2011

Вот код, который прекрасно работает:

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

$(".TipMe").live("mouseover", function (event) {

        var $this = $(this);
        var tipContent= $(this).parents('td').find('.classOfToolTIpContent').html();
        if (!$this.data("toolTipAttached")) {
            $this.data("toolTipAttached", true)

            $this.qtip({
                overwrite: true,
                content: tipContent,
                show: {
                    delay: 65,
                    ready: true,
                    solo: true
                },
                hide: {
                    fixed: true,
                    delay: 300
                },
                style: {
                   widget: false,
                    tip: {
                        corner: true,
                        border:1,
                        height:15,
                        width:15


                    }
                },
                position: {
                    target: 'mouse',
                    adjust: {
                        mouse: false,
                        screen: true
                    }
                }
            },
           event);
            $this.trigger("mouseover");
        }

    });
...