Question

I have a QTip assigned to an element as follows:

$('#myDiv').qtip({
            show: { when: { event: 'click', } },
            hide: { when: { event: 'unfocus' } },
            style: {
                  border: {
                     width: 5,
                     radius: 10
                  },
                  padding: 10, 
                  textAlign: 'center',
                  tip: true, // Give it a speech bubble tip with automatic corner detection
                  name: 'red' // Style it according to the preset 'cream' style
            },
            position: {
                corner: {
                 tooltip: 'topMiddle', // Use the corner...
                 target: 'bottomMiddle' // ...and opposite corner
                }
            },
            content: {
               text: self.parent('.qtip').html(),
               title: { text: 'My Title' }
            },

        });

Under ‘text’ in ‘content’, I am trying to access the innerHTML of the element that triggered this QTip to appear after being clicked on.

However, my current means of self.parent('.qtip').html(), as displayed above, is not working.

What is the standard way to do this? Thanks.

Answer 1

I later found the solution to this question.

To access properties of the element that triggered the QTip, one must structure the code in this way:

$("#container a").each(function() { 
    $(this).qtip({ // QTip code });
});

That way, one can use $(this) to access data such as innerHTML of the element that triggered the QTip.