Всплывающая подсказка
Всех с Новым, 2015 годом!
Ребята, хочу написать скрипт, который при наведении на блок в него будет добавлять блок с текстом подсказки. Все работает хорошо, блок появляется при событии mouseover: <div onmouseover="help(this);">i</div> function help(element)
{
var help_1 = "Подсказка номер 1";
$(element).append(help_1);
}
Но проблема в том, что этот блок с подсказкой должен исчезать, когда я убираю мышку с основного блока. Как это реализовать? В моем коде, мы будем при каждом наведении на основной блок добавлять еще один блок с подсказкой, старые подсказки не исчезают. |
<style type="text/css">
.hover:hover>*{
display:block!important;
position:absolute;
z-index:1;
margin-top:30px;
color:red;
font: normal normal 700 12.76px/10.21px Tahoma;
}
</style>
<div class=hover>iii
<element style="display:none">C Новым Годом!</element>
</div>
|
спасибо большое, но а все же на js как это реализовать, чтобы в будущем знать.
|
Vladislav,
:) <!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var helper = document.createTextNode("Подсказка номер 1") ;
$("div").on({
"mouseenter": function(event) {
$(this).append(helper);
},
"mouseleave": function(event) {
$(helper).remove()
}
})
});
</script>
</head>
<body>
<div>i</div>
</body>
</html>
|
Больше часа потратил, но зато вот что получилось:
http://learn.javascript.ru/play/iP4qO <!DOCTYPE HTML>
<html>
<head>
<title>Tooltip by Ruslan_xDD aka Black Shadow</title>
<!---Skype: ruslan_xdd--->
<style type="text/css">
.help {
background: rgba(0,0,0,0.7);
border-radius: 10px;
color: #AAA;
margin-top: 8px;
opacity: 0;
padding: 3px 6px;
position: absolute;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
visibility: hidden;
z-index: 1;
}
.help::after {
border: 8px solid transparent;
border-bottom-color: rgba(0,0,0,0.7);
content: '';
left: 50%;
margin-left: -8px;
position: absolute;
top: -16px;
}
.help-show {
opacity: 1;
visibility: visible;
}
</style>
</head>
<body>
<a data-help="Текст 1" href="#">Ссылка с подсказкой №1</a>
<br>
<a data-help="Текст 2" href="#">Ссылка с подсказкой №2</a>
<br>
<input data-help="Текст 3" type="button" value="Кнопка с подсказкой">
<div data-help="Текст 4">Блок с подсказкой</div>
<script type="text/javascript">
(function(d) {
var createHelpBlock = function(text) {
var div = d.createElement('div');
div.appendChild(d.createTextNode(text));
div.className = 'help';
return div;
},
elems = d.querySelectorAll('[data-help]');
[].forEach.call(elems, function(self) {
self.addEventListener('mouseover', function() {
var helpBlock = this._helpBlock || createHelpBlock(this.dataset.help);
if(!this._helpBlock) {
this.parentNode.insertBefore(helpBlock, this.nextSibling);
this.clientHeight;
this._helpBlock = helpBlock;
}
else clearTimeout(this._helpTimeout);
helpBlock.classList.add('help-show');
}, true);
self.addEventListener('mouseout', function() {
var self = this;
this._helpBlock.classList.remove('help-show');
this._helpTimeout = setTimeout(function() {
self._helpBlock.remove();
self._helpBlock = null;
}, 3E3);
}, true);
});
})(document);
</script>
</body>
</html>
|
первый код на больную голову :)
<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>
|
Цитата:
Цитата:
|
Цитата:
|
bes,
нет поддержки для множества классов - открой код в ie |
Цитата:
|
| Часовой пояс GMT +3, время: 10:50. |