QTip2 Несколько элементов, та же подсказка - PullRequest
Новая
       43

QTip2 Несколько элементов, та же подсказка

5 голосов
/ 20 февраля 2012

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

Я пробовал несколько разных подходов и искал ответы в Интернете безрезультатно.

На данный момент у меня есть это: 

var $links = $('a.link');
var len = $links.length;
for(var i = 0; i < len; i++){
    var $ele = $($links[i]);
    $ele.qtip({
        id: 'editLink',
        overwrite: false,
        content: {
            text: $linkEditor,
            title: {
                text: 'Edit Link',
                button: true
            }
        },
        position: {
            my: 'top center',
            at: 'bottom center',
            viewport: $(window)
        },
        show: {
            event: 'mouseover',
            solo: true
        },
        hide: false,
        style: {classes: 'ui-tooltip-shadow ui-tooltip-red'}
    });
}

Что я ищу, так это чтобы все эти элементы использовали одну и ту же подсказку. Я хочу, чтобы все они использовали одно и то же содержимое (в данном случае одну форму) и ссылались на всплывающую подсказку точно таким же образом (с помощью элемента подсказки с идентификатором ui-tooltip-editLink ').

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

Кто-нибудь знает способ выполнения нескольких элементов, один и тот же подход всплывающей подсказки?

Ответы [ 5 ]

1 голос
/ 14 августа 2013

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

tooltipBearing класс, установленный на некоторых изображениях на странице.

tooltipDiv - это идентификатор элемента div, содержащего содержимое всплывающей подсказки.

0 голосов
/ 07 мая 2015

Исходя из ответа пользователя 738048 , мое рабочее решение выглядит так: 

$('[data-tooltipid]').each(function() {
    var ttid = $(this).data('tooltipid');
    $(this).qtip({
        content: {
            text: $('#'+ttid).html(),
        },
        position: {
            my: 'top left',
            at: 'bottom left',
            target: $(this)
        }
    }).removeAttr('href').removeAttr('onclick');
});

В моем случае идентификатор HTML-элемента, содержащего текст, взят из атрибута data-tooltipid; Мои атрибуты href и onclick удалены, так как они устарели во всплывающей подсказке.

0 голосов
/ 27 февраля 2014

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

$('#unique-element').qtip({
  content: {text: 'My Tooltip'},
});

$('.other-elements').click(function(){
  $('#unique-element').qtip('show');
});

Однако все ваши подсказки будут отображаться в фиксированном положении.В моем случае это не было проблемой, потому что я использовал всплывающую подсказку как модальную.Вам придется управлять положением всплывающей подсказки с помощью методов cutom event.

0 голосов
/ 22 мая 2013

К сожалению, похоже, что нам нужно клонировать элемент Tooltip для каждого элемента hover / click.

Крейг упоминает об этом в выпуске GitHub: https://github.com/Craga89/qTip2/issues/173

0 голосов
/ 26 апреля 2012

Чтобы использовать qtip в динамически создаваемом элементе, необходимо включить qtip во время инициализации элемента.

например. 

$('<div style="top:0px; left:0px; position:absolute;">abc123</div>').appendTo("body").qtip({content: "test"});
...