JavaScript - How To Update The Inline Html Tooltip Script?

function obj_position(obj,id) {
    //Setup variables to hold position values
    var left = top = 0;
   
    if (obj.offsetParent) {
        do {
            //Get position values and put in variables
            left += obj.offsetLeft;
            top += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    //Get alt content for tooltip
    var alt_message = document.getElementById(id).getAttribute('alt');
    return left+","+top+","+alt_message;
}
function display_tooltip(obj) {
    //Get the elementID first
    var elmID = obj.id;
   
    //First of all get the position data for current element
    //Also get the message to be displayed- contained in the alt
    var pos_mess = obj_position(obj,elmID);
   
    //Now splitup the returned string to get the lef _position, right
    //position and the message to be displayed
    var part = pos_mess.split(",");
   
    //Create variables for the parts
    var left_pos = part[0];
    var top_pos = part[1] - 18;
    var message = part[2];
   
    var container = document.getElementById('tooltip_container');
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id','tooltip');
    newdiv.className = 'tooltip_style';
    newdiv.innerHTML = message;
   
    //Position div
    newdiv.style.position="absolute";
    newdiv.style.top=top_pos+"px";
    newdiv.style.left=left_pos+"px";
   
    //Append newly created div to container
    container.appendChild(newdiv);
   
}
function delete_tooltip() {
    var container = document.getElementById('tooltip_container');
    var old_div = document.getElementById('tooltip');
    container.removeChild(old_div);
}

<a style='margin-left: 10px; position:relative' class="tooltip" title="This is some text to display">

$(document).ready(function(){

    $("a.tooltip").live( {
        mouseenter:
            function(e){
                this.t = this.title;
                this.title = "";
                $("body").append("<p id='tooltip'>"+ this.t +"</p>");
                $("#tooltip")
                    .css("top",(e.pageY - 10) + "px")
                    .css("left",(e.pageX + 20) + "px")
                    .fadeIn("fast");
                var css_width = $('#tooltip').width();
                var text_width = $('#tooltip').textWidth();
                if (css_width > text_width) {
                    $('#tooltip').width(text_width);
                }
            },
        mouseleave:
            function(){
                this.title = this.t;
                $("#tooltip").remove();
            }
        }
    );

});

$.fn.textWidth = function textWidth() {
    var html_org = $(this).html(); 
    var html_calc = '<span>' + html_org + '</span>'; 
    $(this).html(html_calc); 
    var width= $(this).find('span:first').width(); 
    $(this).html(html_org); 
    return width;
}

<a style='margin-left: 10px; position:relative' class="tooltip" width="100" title="This is some text to display">

<script type="text/javascript">
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX - 90; //Get X coodrinates
        var mousey = e.pageY  - 400; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 90 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 90;
        } if ( tipVisY < 90 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 90;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});
</script>

<a
 href="http://www.javascriptkit.com/dhtmltutors/ajaxticker/index.shtml"
 rel="htmltooltip">RSS Ajax Ticker</a>

<!--Inline HTML Tooltips (DIV with class="htmltooltip"-->
<!--Matched up with anchor links with rel="htmltooltip" and in the order they appear within page's source-->

<div rel="<?php echo $url;?>" class="cp-code">copied code</div>
<div class="test" style="display: none; border: 1px solid #ccc; padding: 8px;">click copy,test,test</div>

ZeroClipboard.setMoviePath("http://example.com/js/ZeroClipboard.swf");
var clip = null;
var url = '';
function init() {
    clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );

    $('.cp-code').mouseover( function() {
        clip.setText(this.innerHTML);
             $('test').style.display = 'block';
        if (clip.div) {
            clip.receiveEvent('mouseout', null);
            clip.reposition(this);
        } else {
                        clip.glue(this);
                }
        clip.receiveEvent('mouseover', null);
        url = $(this).attr('rel');
    });

    clip.addEventListener('mouseUp', function(client) {
        window.open(url);
    });
clip.addEventListener('mouseOut', function (client) {
 $('test').style.display = 'none'; 
});
}

$(document).ready(function() {
	init();
});

  <li id='1tab_1a' class='selected'><a id='1link_1a'  title="Customer Info Screen"><span >Customer Info</span></a></li>
  <li id='1tab_1b' ><a id='1link_1b'  title="Order Detail"  ><span>Order</span></a></li>
 
 <li id='1tab_1c' ><a id='1link_1c'  title="Phone Detail" ><span>Phone:  7093521232</span></a></li>

initToolTips = function(){
	var anchors = document.getElementsByTagName("a");
	for(var i = 0; i < anchors.length; i++){
		var tip = anchors[i].getAttribute("tooltip");
		if(!tip) continue;

		var divHolder = document.createElement("div");
		var divTop = document.createElement("div");
		var divMid = document.createElement("div");
		var divBot = document.createElement("div");

		divHolder.className = "tooltip";  // color:#333;
		divTop.className = "tooltiptop"; // background:url(...) ;
		divMid.className = "tooltipmid"; // background:url(...) repeat-y;
		divBot.className = "tooltipbot"; // background:url(...);

		divHolder.appendChild(divTop);
		divHolder.appendChild(divMid);
		divHolder.appendChild(divBot);
		
		var atts = divHolder.style;

		anchors[i].onmouseover = function(e){ 
			divMid.innerHTML = e.target.getAttribute("tooltip");
			document.body.appendChild(divHolder);

			alert(divHolder.style.height); //divHolder is 
		}
		anchors[i].onmousemove = function(e){
			var ie = (document.all);
			if(ie){
				atts.marginLeft =(event.clientX) + "px";
				//atts.marginTop = (event.clientY - divTop.style.height - divMid.style.height - divBot.style.height)  + "px";
			}
			else{
				atts.marginLeft = (e.pageX) + "px";
				//atts.marginTop = (e.pageY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
			}
		}
		anchors[i].onmouseout = function(e){
			document.body.removeChild(divHolder);	
		}
	}
}

wren.initToolTips = function(){
	var anchors = document.getElementsByTagName("a");
	for(var i = 0; i < anchors.length; i++){
		var tip = anchors[i].getAttribute("tooltip");
		if(!tip) continue;

		var divHolder = document.createElement("div");
		var divTop = document.createElement("div");
		var divMid = document.createElement("div");
		var divBot = document.createElement("div");

		divHolder.className = "tooltip";
		divTop.className = "tooltiptop";
		divMid.className = "tooltipmid";
		divBot.className = "tooltipbot";

		divHolder.appendChild(divTop);
		divHolder.appendChild(divMid);
		divHolder.appendChild(divBot);
		
		var atts = divHolder.style;
		atts.display = "none";
		document.body.appendChild(divHolder);

		anchors[i].onmouseover = function(e){ 
			divMid.innerHTML = e.target.getAttribute("tooltip");
			atts.display = "inline";
			//alert(divHolder.style.height); //alerts nothing
		}
		anchors[i].onmousemove = function(e){
			var ie = (document.all);
			if(ie){
				atts.marginLeft =(event.clientX) + "px";
				//atts.marginTop = (event.clientY - divTop.style.height - divMid.style.height - divBot.style.height)  + "px";
			}
			else{
				atts.marginLeft = (e.pageX) + "px";
				//atts.marginTop = (e.pageY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
			}
		}
		anchors[i].onmouseout = function(e){
			atts.display = "none";
		}
	}
}

// Extended Tooltip Javascript
// copyright 9th August 2002, 3rd July 2005, 24th August 2008
// by Stephen Chapman, Felgall Pty Ltd

// permission is granted to use this javascript provided that the below code is not altered

function pw() 
	{return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth}; 
	
function mouseX(evt) 
	{return evt.clientX ? evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) : evt.pageX;} 

function mouseY(evt) 
	{return evt.clientY ? evt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) : evt.pageY} 
	
function popUp(evt,oi) 
	{if (document.getElementById) 
		{var wp = pw(); 
		dm = document.getElementById(oi); 
		ds = dm.style; 
		st = ds.visibility; 
		
		if (dm.offsetWidth) 
			ew = dm.offsetWidth; 
		
		else if (dm.clip.width) 
			ew = dm.clip.width; 
			
			if (st == "visible" || st == "show") 
				{ ds.visibility = "hidden"; } 
			
			else {
				tv = mouseY(evt) + 20; 
				lv = mouseX(evt) - (ew/4); 
				
				if (lv < 2) 
					lv = 2; 
				
				else if (lv + ew > wp) 
						lv -= ew/2; lv += 'px';tv += 'px';  
						ds.left = lv; 
						ds.top = tv; 
						ds.visibility = "visible";
				}
			}
		}

window.onload = function() 
	{
		creationCompleteHandler();
	}

function creationCompleteHandler()
	{
		calcNumDesigns();
		setLinks();
		controlToolTip();
	}

function calcNumDesigns()
	{
		var numDesignBoxes = designImages.length;
		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
		
		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
			{
				var newGalleryBox = document.createElement('div');
				var newGalleryBoxID = ("galleryRow" + n);
				newGalleryBox.setAttribute('id',newGalleryBoxID);
				newGalleryBox.setAttribute('class',"galleryBox");
				document.getElementById('content').appendChild(newGalleryBox);
				
				squareOff(newGalleryBox);
				
				var rowBoxes;
				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
				else rowBoxes = 2;
				
				for ( m = 0 ; m <= rowBoxes ; m++ )
					{
						var boxNum = ( n * 3 ) + m;
						var newDesignBox = document.createElement('div');

						var newDesignBoxID = "design" + boxNum;
						newGalleryBox.appendChild(newDesignBox);
						newDesignBox.setAttribute('id',newDesignBoxID);
						newDesignBox.setAttribute('class',"designBox");

						var newDesignImg = document.createElement('img');
						var newDesignImgID = "designImg" + boxNum;
						newDesignImg.setAttribute('id',newDesignImgID);
						newDesignImg.setAttribute('class',"designImage");
						newDesignImg.src = designImages[boxNum][0]; 
						
						newDesignBox.appendChild(newDesignImg);
						
						var newDesignTip = document.createElement('div');
						var newDesignTipID = "tt-design" + boxNum;
						newDesignTip.setAttribute('class',"tip");
						newDesignTip.textContent = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
						newDesignTip.innerText = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
						
						newDesignBox.appendChild(newDesignTip);
					}
			}
	}
	
function squareOff(frame)
	{
		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
	}
	
function setLinks()
	{
		for (var x in designImages)
			{ 
				document.getElementById("design"+x).onclick = new Function( "sendToURL(" + x + ")" );
			}
	}
	
function sendToURL(x)
	{
		var url = designImages[x][1]
		MM_goToURL('self',url);
		return document.MM_returnValue;
	}
	
function MM_goToURL() 
	{ //v3.0
 		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
 		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}

function controlToolTip()
	{
		for (var x in designImages)
			{ 
				var currTip = "tt-design" + x;
				document.getElementById( "design" + x ).onmouseover = "controlPopUp( event , " + x + ")";
			}
	}
	
function controlPopUp( evt , x )
	{
		var e = evt;
		var currTip = "tt-design" + x;
		popUp( e , currTip );
	}

.tip {
	font:10px/12px Arial,Helvetica,sans-serif; 
	border:solid 1px #666666; 
	width:270px; 
	padding:1px;
	position:absolute; 
	z-index:100; 
	visibility:hidden;
	color:#333333; 
	top:20px;
	left:90px; 
	background-color:#ffffcc;
	layer-background-color:#ffffcc;
}