CodingForums.com - tooltip for wdCalendar

Need help to convert the title that appears on the events area on mouseover to a nice looking tooltip. I tried to do this in BuildDayEvent function by adding p.class="masterTooltip" but it does not work.
Code:
function BuildDayEvent(theme, e, index) {

            var p = { bdcolor: theme[0], bgcolor2: theme[0], bgcolor1: theme[2], width: "70%", icon: "", title: "", data: "" };

                        

            p.starttime = pZero(e.st.hour) + ":" + pZero(e.st.minute);

            p.endtime = pZero(e.et.hour) + ":" + pZero(e.et.minute);

                                                

            p.content = e.event[1];

            p.title = getTitle(e.event);                        

                        //p.title = "onmouseover=&quot;showToolTip(event,'"+tooltip+"');return false&quot; onmouseout=&quot;hideToolTip()&quot;";

            p.data = e.event.join("$");

                        

            var icons = [];

            icons.push("<I class=\"cic cic-tmr\">&nbsp;</I>");

            if (e.reevent) {

                icons.push("<I class=\"cic cic-spcl\">&nbsp;</I>");

            }

            p.icon = icons.join("");

            var sP = gP(e.st.hour, e.st.minute);

            var eP = gP(e.et.hour, e.et.minute);

            p.top = sP + "px";

            p.left = (e.left * 100) + "%";

            p.width = (e.aQ * 100) + "%";

            p.height = (eP - sP - 4);

            p.i = index;

            if (option.enableDrag && e.event[8] == 1) {

                p.drag = "drag";

                p.redisplay = "block";

            }

            else {

                p.drag = "";

                p.redisplay = "none";

            }

            var newtemp = Tp(__SCOLLEVENTTEMP, p);

            p = null;

            return newtemp;

        }





<style>

.tooltip {

        display:none;

        position:absolute;

        border:1px solid #333;

        background-color:#161616;

        border-radius:5px;

        padding:10px;

        color:#fff;

        font-size:12px Arial;        

}



</style>

<script>

        $jtooltip = jQuery.noConflict();

        //$jtooltip("#gridcontainer a[title]").tooltip();

        

        

        $jtooltip(document).ready(function() {

        // Tooltip only Text

        $jtooltip('.masterTooltip').hover(function(){

                // Hover over code

                var title = $jtooltip(this).attr('title');

                $jtooltip(this).data('tipText', title).removeAttr('title');

                $jtooltip('<p class="tooltip"></p>')

                .text(title)

                .appendTo('body')

                .fadeIn('slow');

        }, function() {

                // Hover out code

                $jtooltip(this).attr('title', $jtooltip(this).data('tipText'));

                $jtooltip('.tooltip').remove();

        }).mousemove(function(e) {

                var mousex = e.pageX + 20; //Get X coordinates

                var mousey = e.pageY + 10; //Get Y coordinates

                $jtooltip('.tooltip')

                .css({ top: mousey, left: mousex })

        });

});

        </script>