Форум

Vladislav · #1 (**permalink**) 31.12.2014, 23:15

Всех с Новым, 2015 годом!

Ребята, хочу написать скрипт, который при наведении на блок в него будет добавлять блок с текстом подсказки. Все работает хорошо, блок появляется при событии mouseover:

<div onmouseover="help(this);">i</div>

function help(element)
{
    var help_1 = "Подсказка номер 1";
    $(element).append(help_1);
}

Но проблема в том, что этот блок с подсказкой должен исчезать, когда я убираю мышку с основного блока. Как это реализовать? В моем коде, мы будем при каждом наведении на основной блок добавлять еще один блок с подсказкой, старые подсказки не исчезают.

Deff · #2 (**permalink**) 31.12.2014, 23:26

<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>

Vladislav · #3 (**permalink**) 31.12.2014, 23:40

спасибо большое, но а все же на js как это реализовать, чтобы в будущем знать.

рони · #4 (**permalink**) 01.01.2015, 00:23

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>

ruslan_mart · #5 (**permalink**) 01.01.2015, 08:08

Больше часа потратил, но зато вот что получилось:

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>

bes · #6 (**permalink**) 01.01.2015, 11:36

первый код на больную голову

<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>

рони · #7 (**permalink**) 01.01.2015, 13:17

Сообщение от bes

hint.classList.add("hint", "dn");

лучше продублировать для каждого класса.

Сообщение от Ruslan_xDD

var self = this;

это лишнее

bes · #8 (**permalink**) 01.01.2015, 13:20

Сообщение от рони

лучше продублировать для каждого класса.

быстрее?

рони · #9 (**permalink**) 01.01.2015, 13:21

bes,
нет поддержки для множества классов - открой код в ie

bes · #10 (**permalink**) 01.01.2015, 13:22

Сообщение от рони

bes,
нет поддержки для множества классов - открой код в ie

аа, так я и не открываю

Форум

Справочник

Discord чат

Курсы javascript