求帮忙 Uncaught TypeError: Cannot set property 'onmouseenter' of null这个错误，不知道怎么改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tooltips</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 14px;
background: url(bg.jpg);
line-height: 2;
}
#demo
{
width: 500px;
margin: 30px auto;
padding: 20px 30px;
position: relative;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
}
#demo h2
{
color: #03f;
}
#demo .tooltip
{
cursor: help;
color: #03f;
}
.tool-box
{
display: block;
background-color: #fff;
line-height: 3;
border: 1px solid #66ccFF;
color: #333;
padding: 20px;
font-size: 14px;
border-radius: 5px;
overflow: auto;
}
</style>
<script type="text/javascript">
var className = 'tool-box';
function showtooltip (obj,id,html,width,height) {
if (document.getElementById(id)==null) {
var toolbox;
toolbox=document.createElement('div');
toolbox.className=className;
toolbox.id=id;
toolbox.innerHTML=html;
obj.appendChild(toolbox);
obj.onmouseleave=function(){
document.getElementById(id).style.display="none";
}
}
else
{
document.getElementById(id).style.display="block";
}
}
var t1=document.getElementById('tooltip1');
t1.onmouseenter = function () {
showtooltip(this, "t1", "中华人民共和国", 200);
};
</script>
</head>
<body>
<div id="demo">
<h2>原生JavaScript实现ToolTip效果</h2>
<!-- <div>aaaaa</div> -->
<p>ToolTip效果是非常常见的网页特效，它可以在用户将指针放置在控件上时为用户显示提示信息。
比如简称文字显示一行文字全称，例：<a id="tooltip1">中国</a>， <a id="tooltip2">NBA</a>。
又比如显示一段文字，例：唐诗三百首中的<a id="tooltip3">春晓</a>你会么？如果不看tooltip提示你背不出来的话，那么你
可要加油了。
</p>
<p>
ToolTip效果还可以用来显示图片，例：<a id="tooltip4">西湖美景</a>。当然显示一块儿带格式的内容也不在话下，例：
<a id="tooltip5">我的资料</a>。
</p>
<p>
甚至你可以显示一整个网站：例：<a id="tooltip6">慕课网</a>。
</p>
<p>
注意好的ToolTip需要考虑样式、效果、页面的边界等信息，希望你可以做出更漂亮的ToolTip效果。
</p>
</div>
</body>
</html>
