Question

我需要打开工具提示 - 多个元素上的相同工具提示。但是，当单击每个目标元素时，qtip会向我的页面添加几个ui-tooltip元素。这意味着当我在一个工具提示中输入值时，当我查看其他工具提示时，它们就消失了。

我需要确保只创建一个ui-tooltip元素，或者在工具提示关闭时销毁ui-tooltip元素。

以下是一个例子：

$(".inline-field").qtip({
        content: '<input type="text" class="abc" />',
        show: {
            event: 'click',
            solo: true,
            modal: true
        },
        hide: {
            event: false
        },
        position: {
            viewport: $(window),
            my: 'top left',
            at: 'top left'
        },
        style: {
            tip: false,
            classes: 'qtip-bootstrap qtip-shadow'
        }
    });

http://jsfiddle.net/uZETs/13/

查看第二个文本框是如何为空？这是一个不同的文本框，但我想再次使用第一个文本框，或者如果不可能，则销毁第一个工具提示，以便当我再次打开第一个工具提示时，文本为空白。

Answer 1

有几种方法可以做到这一点，但建立在hjavaher提到的想法的基础上，使用共享提示内容DIV来存储表单和当前值，并根据需要使用qTip show / hide事件处理程序更新字段：< / p>

http://jsfiddle.net/kiddailey/eKLFq/4/

HTML：

<div class="inline-field login">Click here and enter text</div><br/>
<div class="inline-field login">Then click here</div>

<div id="TipContent" style="display: none;">
    <input type="text" class="abc" />
</div>

JS：

$(document).ready(function()
{
    $('.inline-field').qtip({
        content: $("#TipContent").html(),
        show: {
            event: 'click',
            solo: true,
            modal: true
        },
        position: {
            viewport: $(window),
            my: 'top left',
            at: 'top left'
        },
        style: {
            tip: false,
            classes: 'qtip-bootstrap qtip-shadow'
        },
        events: {
           show: function(event, api) {
                // Update this tip's field with the current value
                $(this).find('input.abc').val($('#TipContent input.abc').val());
           },
           hide: function(event, api) {
                // Save the current value to the "master" div
                $('#TipContent input.abc').val($(this).find('input.abc').val());
           }
       }

    });

});

Answer 2

您可以向以下选项添加事件：

[... all the other options],
events: {
    hide: function(event, api) {
        $('input.abc').val($(this).find('input').val()); //This will sync all the inputs upon exiting tooltip
        //$(this).find('input').val(""); //This will blank out the input upon exiting
    }
}

请注意，我已将上述两项要求都包含在内，只使用其中一项

Qtip2在多个元素上使用相同的工具提示

2 个答案: