js实现鼠标放入后面内容标签显示，鼠标移出内容标签隐藏

昨天犯了个毛病，input显示框显示不全的问题，要求是把鼠标悬停输入框，显示完整的内容（输入框的宽度不能够修改）！
正常人都会想到用tinput的itle属性，俺当时就脑抽了吧，想着在后面添加一个span框（span），效果就是鼠标放入输入框，input的父级元素加上一个span框，并且取出input 的值，鼠标移出，就把span元素移除（脑子抽了，非常规操作当时想的理所当然）。
话不多说，看看这个好就不曾写的原生js代码。。。。。
html的代码如下

 <td style='width:80px;'> 
		<input  type='text' style='width:80px;' id='countNum'  onmouseout="removeMsg(e) " onmouseover='renderMsg(event)'   /> "
</td>
//以下td是通过数据渲染出来的，数据有多少条就渲染多少
 <td style='width:80px;'> 
		<input  type='text' style='width:80px;'  id= "+ id+"   onmouseout="removeMsg(e) " onmouseover='renderMsg(event)' /> 
</td>

以下是js代码

function renderMsg(e){
	var  targetId = e.target.id
	var target = document.getElementById(targetId)
    let val = document.getElementById(targetId).value;
	let parentNode = target.parentNode;
 	var nodeList= 	parentNode.childNodes;
	let spanElement = document.createElement("span");
	spanElement.style.cssText = "position: relative;left:1px;top:2px;font-size:8px;z-index: 9999"
	if (target.parentNode.childNodes.length <= 3){
		spanElement.innerHTML =val;
		parentNode.appendChild(spanElement)
	}else {
		var nodeListElement = nodeList[nodeList.length-1];
		parentNode.removeChild(nodeListElement)
		spanElement.innerHTML =val;
		parentNode.appendChild(spanElement)
	}
}
function removeMsg(e) {
	var  targetId = e.target.id
	var target = document.getElementById(targetId)
	let parentNode = target.parentNode;
	var nodeList= parentNode.childNodes;
	console.log(nodeList)
	if (target.parentNode.childNodes.length ===4||target.parentNode.childNodes.length === 3){
		var nodeListElement = nodeList[nodeList.length-1];
		parentNode.removeChild(nodeListElement)
	}
}

给新增的input框增加随机的不能重复的id

function createRandomId() {
	return (Math.random()*10000000).toString(16).substr(0,4)+'-'+(new Date()).getTime()+'-'+Math.random().toString().substr(2,5);
}

好了，不说了！，做了半天的只用给input的title赋值就好了！！！心态崩了啊