Add Title to Content with an Ajax Call

[brant]

I am having trouble figuring out how to add a qTip title attribute to some of the content returned from an Ajax call. I also can't seem to change the width. Could someone help me out?

JS Code

$(".qball").each(function () {
		var first = $(this).attr('first');
		var last = $(this).attr('last');
		var sport = $(this).attr('sport');
		var q = $(this).attr('q');	
$(this).qtip({
   content: {
      url: '/ajax_pu.php',
      data: { first: first, last: last, sport: sport, q: q },
      method: 'get'
   },
   position: {
         corner: {
           target: 'bottomLeft',
          tooltip: 'topLeft'
        }
      },
   style: {
   		width: 400, 
      name: 'dark'
   },
 
});
});

[brant]

I decided the best thing to do is to just set the padding to 0 and design it myself to mimic the title.

Though I noticed a few bugs:

- When mousing over the tooltips sometimes they move in from the top left corner.
- Width does not work.
- adjust screen true does not work. tooltips still showup off screen.

JS Code

$(".qball").each(function () {
		var first = $(this).attr('first');
		var last = $(this).attr('last');
		var sport = $(this).attr('sport');
		var q = $(this).attr('q');	
$(this).qtip({
   content: {
      url: '/ajax_pu.php',
      data: { first: first, last: last, sport: sport, q: q },
      method: 'get'
   },
   position: {
         corner: {
           target: 'topMiddle',
          tooltip: 'bottomMiddle'
        },
       	adjust: { screen: true}
      },
   show: { delay: 25 },
   style: {
   		 border: {
        width: 3
       },
   		width: 400, 
      name: 'dark',
      padding: 0
   },
 
});
});

[Craig]

brant, unfortunately there isn't any really easy way of accomplishing this in the 1.x branches. But the 2.x branch allows you to do this really easily like so via the ajax plugin:

JS Code

$('.selector').qtip({
   content: {
      ajax: { 
          url: 'ajax.php',
          data: { tooltip: 3 }
          success: function(api, content) {
             var title = $(content).find('h3').html() // Find new title in the retrieved content
             api.set('content.title.text', title) // Set it using the api reference
          }
      }
   }
});