apply css to bootstrap tooltip title in a Jquery function

[rich123]

I use the following JQuery function for applying tooltips for (only) the 2nd column in a webform gridview which uses a webmethod -- using asp.net boundfields in this gridview (not asp.net labels). Thus, I required the JQuery function to apply the tooltip the the specified cell in the gridview. The problem I am having is in applying css to the tooltip title. The problem arises when I add -- container: 'body' to $(this).tooltip({.....}). If I don't include container:'body' then the tooltips become very unstable in large datasets and jump upward direction from row 1100 to row 600 for example: When I add -- container: 'body' this stabilizes the tooltips and they stay on the row I am currently on. However, container: 'body' seems to override title:$(this).addclass("mycssclass") and I lose the custom formatting for the tooltip title and I get the default bootstarp format. How can I apply css to the tooltip title here and keep the tooltip stable? (note: titel is distinguished from title in var titel)

$(function () {
   $.ajax({
       type: "POST",
       url: "WebForm3.aspx/GetMyStuff",
       contentType: "application/json;charset=utf-8",
       data: {},
       dataType: "json",
       success: function (data) {                        
       $('[id*=GridViewA] tr').each(function (n) {
          $(this).find("td:eq(1)").each(function () {                                
              var titel = typeof (data.d[n - 1]) === 'undefined' ? "" : data.d[n - 1].firstN + "<br />" + data.d[n - 1].lastN;        
              $(this).tooltip({container: 'body' title: $(this).addClass("colr-tooltip"), title: titel, html: true, placement: "bottom" });
          });
       });
     },
      error: function () { alert("error"); }
   });
});

<style type="text/css">
.colr-tooltip + .tooltip > .tooltip-inner
   {
        width: 200px;
        max-width: 600px !important;
        background-color: gainsboro;
        color: blue;
        text-align: left;
        opacity: 1;
        filter: alpha(opacity=100);  
       -moz-box-shadow: 0 0 5px 2px black;
       -webkit-box-shadow: 0 0 5px 2px black;
       box-shadow: 0 0 5px 2px black;   
   }
</style>

[rich123]

I figured it out -- in the line

var titel = typeof (data.d[n - 1]) === 'undefined' ? "" : data.d[n - 1].firstN + "<br />" + data.d[n - 1].lastN;

I just embed an html table and add all the properties there

var titel = typeof (data.d[n - 1]) === 'undefined' ? "" : "<table  style='color:blue;background-color:lightgreen;width:100px;text-align:left;'><tr><td>" + data.d[n - 1].firstN + "</td></tr><tr><td>" + data.d[n - 1].lastN + "</td></tr></table>";