Use hovered element's own HTML for qtip content

[discern]

I have several span tags which look similar to tds in a table. They have a set width and overflow: hidden in the CSS. I wanted to avoid sending a title attribute along to save bandwidth, because it would be a duplicate of the span's content. For example, instead of...

JS Code

<span class="x" title="foo...">foo...</span>

...I wanted to send...

JS Code

<span class="x">foo...</span>

...which, in many cases, would reduce sent data by about 40%. I thought I could do something like...

JS Code

$("span.x").qtip({
  content: {
    text: function(){
      $(this).html();
    }
  }
});

OR

JS Code

$("span.x").qtip({
  content: function(){
    $(this).html();
  }
});

...but it doesn't seem to be working. It only shows an empty qTip box. What am I doing wrong?

[Craig]

discern,

This is actually a commonly asked question and a problem a lot of new jQuery users tend to run into. What you have to get your head around is that $(this) when used in the context of the qTip call is actually just referring to the document or window element, since 'this' outside a function doesn't really have any meaningful value.

What you need to do is give 'this' context by using jQuery's each() method. This loops through each element within the $() DOM array and gives $(this) the value of the current element:

JS Code

$("span.x").each(function(){
   $(this).qtip({
      content: $(this).html()
   });
});

[discern]

Thanks very much for the reply, Craig, and for creating such a great tool and standing behind it!