[dips255]

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.

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="showToolTip(event,'"+tooltip+"');return false" onmouseout="hideToolTip()"";
            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>