Question

用javascript 当鼠标移动到任意文字上弹出框显示文字内容，不是加title属性

如题，用javascript实现，大概就是要遍历全部文本节点，然后添加监听，但是我一直加不进去，求大神解决，感激不尽

Answer 1

(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);

Answer 2

可以使用js的onmouseover、onMouseOut事件，鼠标经过的时候可以给a标签增加一个元素并让他显示，移出的时候删掉这个元素

追问

如果不是a标签呢，textarea标签之类的呢，好像要遍历文本节点，然后添加事件，但是遍历后添加就没反应了

追答

都是差不多的，找到某个节点，在这个节点处插入内容