javascriptjqueryajaxqtip

why qtip tool tip is not showing pop up on first click ,from second click its showing the tool tip


UPDATED Question :: its working from left click on the node ,inaddtion to that from the right click also it should work for us..on right click-->properties,pop shpuld be displyed on the actual node not on right click menu..as shown below ..when i click do right click on node,i will get right click menu !when i click view properties pop up should be displayed on the nodenot on the right click menu

enter image description here

I have 10-15 nodes in a layout,all nodes will be dynamic,on click of each node ajax call needs to be made and results of the ajax results needs to be shown using qtip tool tip.below is the code of it .on first click it is not showing the pop up but from seconf click its showing tool tip.why its not showing the pop on first click?????

    var str = "#JP"+ nodeId;

    $(str).qtip({

        content: {
            text: 'Loading...', 
            ajax: {
                url: 'url', 
                dataType : 'text',
                type: 'GET', // POST or GET
                data: {}, // Data to pass along with your request
                success: function(data, status) {
                    alert(data);
                    this.set('content.text', data);
                },error : function(msg, url, line){
                    alert('msg'+ msg);
                }
            }
            }
        });

Solution

  • Try using qTip2 (http://qtip2.com) and check this demo:

    http://jsfiddle.net/craga89/L6yq3/

     $('a').each(function() {
         $(this).qtip({
            content: {
                text: function(event, api) {
                    $.ajax({
                        url: api.elements.target.attr('href') // Use href attribute as URL
                    })
                    .then(function(content) {
                        // Set the tooltip content upon successful retrieval
                        api.set('content.text', content);
                    }, function(xhr, status, error) {
                        // Upon failure... set the tooltip content to error
                        api.set('content.text', status + ': ' + error);
                    });
    
                    return 'Loading...'; // Set some initial text
                }
            },
            position: {
                viewport: $(window)
            },
            style: 'qtip-wiki'
         });
     });