Search code examples
javascriptjqueryhtmlqtip2

qTip change text of specific tooltip after for each


I have an html page with some inputs and textareas. I want them to have qTip with different texts.

Here is my attempt First I add a qTip to every element,

$('input, textarea').each(function() {
        $(this).qtip(
                { 
                content : 'generated', //this is for debug
                position : {

                    my : 'center left',
                    at : 'center right',
                    adjust : {
                        x : 90
                    }
                }
            });
});

and then I'm trying to change an qTip text like this

$("#firstName").qtip('option', 'content.text', 'adwd');

but it is not working.

I tried this

$("#lastName").qtip({
    content : 'text text'
});

which is working fine but it overrides the position


Solution

  • This code working for me:

    $("#firstName").qtip('option', 'content.text', 'new tooltip content')
    

    If you have to change it on an event (eg over or similar) try using this code:

    // make sure you target a specific tip
    var qapi = $('#firstName').data('qtip'),
    newtip = 'new tooltip content'
    qapi.options.content.text = newtip; // update content stored in options
    qapi.elements.content.text(newtip); // update visible tooltip content
    qapi.redraw(); // redraw to adjust tooltip borders
    

    The code update only a specific option and leave the others as are.

    Demo: http://jsfiddle.net/IrvinDominin/L7fs5/