Qtip2 Use same tooltip on multiple elements

Question

I have the need to open a tooltip - the same tooltip on multiple elements. However, qtip appends several ui-tooltip elements to my page when each target element is clicked. This means that when I enter values inside one tooltip they are gone when I look at the other ones.

I need to either ensure that only one ui-tooltip element is created, or destroy the ui-tooltip element when the tooltip is closed.

Here's an example:

$(".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/

See how the 2nd text box is empty? It's a different text box but I want to use the first one again, or if not possible, to destroy the first tooltip so that when i open the first tooltip again the text is blank.

Answer 1

There are a few ways to do this, but building on the idea that hjavaher mentioned, use a shared tip content DIV to store the form and current value, and update fields as needed with the qTip show/hide event handlers:

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

You can add an event to the options like this:

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

Please note that I've included both of the requirements above just use one of them