步骤:
1、构造好页面内容;
2、在css中设置一个隐藏类hide,类的样式为display:none;设置显示类show,样式为display:block;
3、给需要隐藏的内容设置类名为hide,这样就隐藏了控件
4、在js标签中,通过控件的类名或者id获取到隐藏对象obhide以及需要监控的对象ob2,再对ob2对象设置onmouseover方法,在这个方法中,将bohide的类名hide更换成show,这样,在鼠标进入ob2控件之中,就会显示隐藏的obhide的内容,
对ob2对象设置onmouseout方法,在这个方法中,将bohide的类名show更换成hide,这样,在鼠标离开ob2控件,就会隐藏obhide的内容,
(function (document) {var ttel = document.createElement('span')
ttel.style.position = 'absolute'
ttel.style.boder = '1px solid #e1dec9'
ttel.style.backgroundColor = '#eae9e3'
ttel.style.left = '0px'
ttel.style.top = '0px'
ttel.style.fontSize = '8pt'
ttel.style.padding = '2px 4px 2px 4px'
ttel.style.zIndex = 9999999
document.body.appendChild(ttel)
function showTooltip(e) {
console.log(e)
ttel.innerHTML = this.innerText || this.textContent || this.value
ttel.style.left = (e.pageX + 10) + 'px'
ttel.style.top = (e.pageY + 10) + 'px'
ttel.style.display = 'block'
return false
}
function hideTooltip(e) {
ttel.style.display = 'none'
ttel.innerHTML = ''
return false
}
function isTextNode(el) {
var children = el.children
if (el.childElementCount == 0)
return true
for (var i = 0 i < children.length i++) {
el = children[i]
var text = ((typeof el.innerText !== 'undefined' && el.innerText != '') ? el.innerText : el.textContent) || el.value
if (text)
return false
}
return true
}
function bindEvent(el) {
var children = el.children
if (children.length == 0 || isTextNode(el)) {
var text = ((typeof el.innerText !== 'undefined' && el.innerText != '') ? el.innerText : el.textContent) || el.value
if ((typeof text !== 'undefined' && text != '')) {
if (el.attachEvent) {
el.attachEvent('onmouseover', showTooltip)
el.attachEvent('onmouseout', hideTooltip)
} else if (el.addEventListener) {
el.addEventListener('mouseover', showTooltip)
el.addEventListener('mouseout', hideTooltip)
}
}
} else {
for (var i = 0 i < children.length i++) {
if (children[i])
bindEvent(children[i])
}
}
}
var el = document.body
bindEvent(el)
})(document)