1

ツールチップを開く必要があります-複数の要素で同じツールチップです。ただし、各ターゲット要素がクリックされると、qtip はいくつかの ui-tooltip 要素をページに追加します。これは、1 つのツールチップ内に値を入力すると、他のツールチップを見ると値が消えてしまうことを意味します。

ui-tooltip 要素が 1 つだけ作成されるようにするか、ツールヒントが閉じられたときに 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/

2 番目のテキスト ボックスが空であることがわかりますか? これは別のテキスト ボックスですが、最初のツールチップを再度使用するか、不可能な場合は最初のツールチップを破棄して、最初のツールチップを再度開いたときにテキストが空白になるようにしたいと考えています。

4

2 に答える 2

1

これを行うにはいくつかの方法がありますが、hjavaher が言及したアイデアに基づいて構築し、共有ヒントのコンテンツ DIV を使用してフォームと現在の値を保存し、必要に応じて qTip の show/hide イベント ハンドラーでフィールドを更新します。

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 に答える