1

我需要打开一个工具提示 - 多个元素上的相同工具提示。但是，当单击每个目标元素时，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/

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

4

2 回答 2

1

有几种方法可以做到这一点，但基于 hjavaher 提到的想法，使用共享提示内容 DIV 来存储表单和当前值，并根据需要使用 qTip 显示/隐藏事件处理程序更新字段：

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

    });

});
于 2013-08-27T21:54:38.867 回答
0

您可以向选项中添加事件，如下所示：

[... 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
    }
}

请注意，我已经包含了上述两个要求，只需使用其中一个

于 2013-08-25T17:58:42.740 回答