Показать сообщение отдельно
  #6 (permalink)  
Старый 01.01.2015, 11:36
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

первый код на больную голову
<style>
.hint {
	background: lightgray;
	position: fixed;
	border-radius: 0 1em;
	opacity: 0.9;
	padding: 0.3em;
}
.dn {
	display: none;
}

</style>
<div>div</div>
<input>
<button>button</button>
<p>paragraph</p>
<a href="#">link</a>

<script>
function addWildHint(text) {
	var hint = document.createElement("div");
	hint.classList.add("hint", "dn");
	hint.innerHTML = text;
	this.parentNode.insertBefore(hint, this);
	this.addEventListener("mouseenter", function (event) {
		hint.classList.toggle("dn", false);
		hint.style.top = event.clientY + 3 + "px";
		hint.style.left = event.clientX + 3 + "px";
		
	});
	this.addEventListener("mouseleave", function () {
		hint.classList.toggle("dn", true);
	});
}

//usage
!addWildHint.bind(document.querySelector("div"), "div hint")();
~addWildHint.bind(document.querySelector("input"), "input hint")();
+addWildHint.bind(document.querySelector("button"), "button hint")();
-addWildHint.bind(document.querySelector("p"), "p hint")();
void addWildHint.bind(document.querySelector("a"), "a hint")();
</script>
Ответить с цитированием