Attempting to display cluetip inside of a dialog box using the 'title' attribute, but all I see is the tooltip title.

 

Code:

 

//display profile dialog box

function showProfile(profileid, msgtype){
 newviewProfile(profileid, msgtype);

   $('#viewprofile').dialog({
     width: 600,
     resizable: false,
     buttons: {
       "Ok": function(){
         $(this).dialog("close");
       }
     }
   });

 

   $('. goal-li').cluetip({
     splitTitle: '|',
     cluetipClass: 'jtip',
     arrows: false,
     sticky: true,
     closePosition: 'title',
     closeText: '<img src="cross.phg" alt="close" />'
   });
 }
}

 

//////////////////////////////////////////////

//dynamically build profile dialog

/////////////////////////////////////////////

function newviewProfile(profileid, msgtype){
  //build DOM script
  //clear profile
  $('#bdid').empty();

  var bd = document.getElementById('bdid');

  var handleSuccess = function(o){
    var profile;
    try{
      profile = YAHOO.lang.JSON.parse(o.responseText);
    }
    catch (x){
      alert("JSON parse failed");
      return;
    }

    if (o.responseText != 'null'){
      var maincol = document.createElement('div');
      maincol.id = "maincolid";
      $('#viewprofile').dialog('option','title',profile.profilename);

      maininner =
        '<div class="main-left-dlg">' +
            '<div class="topic-dlg">' +
              '<h3 id="about-me">About Me</h3>' +
              '<div id="profile-achievements" class="story-text-dlg">' +
                '<p>' + profile.achievements + '</p>' +
              '</div>' +
            '</div>';

 

//HERE IS WHERE I USE CLUETIP
            if (profile.goals != null){
              maininner = maininner +'<div class="topic-dlg"><h3 id="profile-goals-hdr">Current Goals</h3><div id="profile-goals"><ul>';

 

              for (var i=0; i<profile.goals.length; i++){
                maininner = maininner +'<li id="goalid' + profile.goals[i].goalid + '" class="goal-li"' +
                  'title="Goal|'+ profile.goals[i].goaldescription + '">' +
                profile.goals[i].goal + '</li>';
              }
            } else {
              maininner = maininner + '<div class="topic-dlg"><h3 id="profile-goals-hdr">No Current Goals</h3><div id="profile-goals">';
            }

            maininner = maininner + '</ul></div></div>'+
          '</div>';

      maininner = maininner + '</div>';
      maincol.innerHTML = maininner;
      bd.appendChild(maincol);
    } else {
      bd.innerHTML = '<h2>No Profile Selected</h2>';
    }
  }

 

  var sUrl = '../forms/getuserprofile.php';
  var postData = 'profileid=' + profileid;

  var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
}

 

I've eliminated some code to make this a little easier to read.  To provide an overview here's the sequence:

1) user clicks link to 'showProfile()'

2) showProfile dynamically builds the dialog box in 'newviewProfile'

3) showProfile creates dialog box with cluetips on <ul><li> elements

 

Note:

- everything works except the cluetip display as noted about

- sorry for the mishmash of code. This application was originally developed using Yahoo User Interface and I am currently migrating to jQuery.  That's why you see combination of technologies.

 

I'm sure there is something very basic that I'm missing but I've been messing with it for a few hours and can't seem to find out why clue won't display.  Any inputs would be appreciated.

 

Thanks,

David