Описание Box с использованием "onmouseover"

Question

Я играю с событием onmouseover в javascript

Я бы хотел, чтобы маленькая коробочка всплывала и оставалась до тех пор, пока onmouseover больше не будет

Я думаю, это называется окно описания, но я не уверен.

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

Answer 1

Предполагая, что popup является идентификатором вашего "окна описания":

HTML

<div id="parent">
This is the main container.
<div id="popup" style="display: none">some text here</div>
</div>

JavaScript

var e = document.getElementById('parent');
e.onmouseover = function() {
  document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
  document.getElementById('popup').style.display = 'none';
}

Кроме того, вы можете полностью избавиться от JavaScript и сделать это просто с помощью CSS:

CSS

#parent #popup {
  display: none;
}

#parent:hover #popup {
  display: block;
}

Answer 2

Хотя это не обязательно решение JavaScript, но также может быть полезен глобальный атрибут тега "title".

<a href="/3361661/opisanie-box-s-ispolzovaniem-onmouseover" title="This is a mouseover title">Mouseover me</a>

Наведите курсор мыши на меня

Answer 3

Ну, для этого я сделал простой двухстрочный скрипт: он маленький и делает то, что вам нужно.

Проверьте это http://jsfiddle.net/9RxLM/

Это решение jquery: D

Answer 4

Это старый вопрос, но для людей, которые все еще ищут. В JS теперь вы можете использовать свойство title.

button.title = ("Popup text here");

Answer 5

Я бы попробовал сделать это с помощью системы обработки событий jQuery .hover () , с помощью которой можно легко отображать div с всплывающей подсказкой, когда указатель мыши находится над текстом, и скрывать его, когда он исчез .

Вот простой пример.

HTML:

​<p id="testText">Some Text</p>
<div id="tooltip">Tooltip Hint Text</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Базовый CSS:

​#​tooltip {
display:none;
border:1px solid #F00;
width:150px;
}​

JQuery:

$("#testText").hover(
   function(e){
       $("#tooltip").show();
   },
   function(e){
       $("#tooltip").hide();
  });​​​​​​​​​​