Skip to content

Instantly share code, notes, and snippets.

@iahu

iahu/hoverHint.css

Created March 26, 2014 02:12
Show Gist options
  • Save iahu/9775708 to your computer and use it in GitHub Desktop.
Save iahu/9775708 to your computer and use it in GitHub Desktop.
Download ZIP
hoverHint
Raw
hoverHint.css
.hint {position:absolute;font:12px arial, 宋体;background:#2d2d2d;color:#f2f2f2;padding:6px 9px;border:1px solid #000;z-index: 999;margin-top:0.5em;}
.hint-content {position: relative;z-index: 1000;}
.hint i, .hint em {position: absolute;display: block;height: 0;width: 0;background: transparent;border: 6px solid transparent;z-index: 100;border-bottom-color: #000;top: -1em;left: 50%;margin-left: -0.5em;}
.hint i {border-bottom-color: #2d2d2d;z-index: 101;margin-top: 1px;}
Raw
hoverHint.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hoverHint-test</title>
<link rel="stylesheet" href="./hoverHint.css">
</head>
<body>
<a href="#" data-hint="测试1" id="test1">测试</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><p id="test2" data-hint="测试2">测试2</p>
<br>
<br>
<br>
<br>
<br>
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="test3" data-hint="测试3">测试3</span>
<script src="./hoverHint.js"></script>
<script>
function $(id) {
return document.getElementById(id);
}
HoverHint( $('test1') );
HoverHint( $('test2') );
HoverHint( $('test3') );
</script>
</body>
</html>
Raw
hoverHint.js
var HoverHint = (function() {
'use strict';
function _getBodyScroll () {
return {
top: document.documentElement.scrollTop || document.body.scrollTop,
left: document.documentElement.scrollLeft || document.body.scrollLeft
};
}
/**
* 悬停提示
* @param {Element} el 目标元素
* @param {str} className 提示自定义的元素的className
*/
function HoverHint(el, className) {
// enforces new
if (!(this instanceof HoverHint)) {
return new HoverHint(el, className);
}
var _self = this;
if (el.jquery) {
for (var i = el.length - 1; i >= 0; i--) {
new HoverHint( el[i], className );
}
} else {
this.el = el;
}
this.content = this.el.getAttribute('data-hint');
this.className = className || '';
if (el.addEventListener) {
el.addEventListener('mouseover', function () {
_self.createUI.call(_self);
}, false);
el.addEventListener('mouseout', function () {
_self.remove.call(_self);
}, false);
} else if (el.attachEvent) {
el.attachEvent('onmouseover', function () {
_self.createUI.call(_self);
});
el.attachEvent('onmouseout', function () {
_self.remove.call(_self);
});
}
}
HoverHint.prototype.createUI = function() {
var createElement = function (name) {
return document.createElement(name);
},
size = this.el.getBoundingClientRect(),
left = _getBodyScroll().left + size.left,
height = Math.max(this.el.clientHeight || this.el.offsetHeight),
top = height + _getBodyScroll().top + size.top,
oHint = createElement('div'),
oAfter = createElement('i'),
oBefore = createElement('em'),
oContent = createElement('div'),
className = this.className;
oHint.className = 'hint ' + className;
oContent.className = 'hint-content';
oContent.innerHTML = this.content;
oHint.appendChild(oAfter);
oHint.appendChild(oBefore);
oHint.appendChild(oContent);
document.body.appendChild(oHint);
oHint.style.left = left + 'px';
oHint.style.top = top + 3 + 'px';
this.hintEl = oHint;
};
HoverHint.prototype.remove = function() {
this.hintEl.parentNode.removeChild(this.hintEl);
};
return HoverHint;
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment