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

Question

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

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

• Как это можно сделать?
• Можно ли это сделать без использования JavaScript?
• Какие еще решения я должен рассмотреть? (Например, я видел, как некоторые веб-страницы расширяют некоторые разделы, когда пользователь наводит на них курсор)

Answer 1

Просто используйте DIV, чтобы показать свой текст, открыть совершенно новое окно - это излишне, и, поскольку большинство людей имеют блокировщики всплывающих окон в своих браузерах, окно даже не будет отображаться. Я предлагаю использовать JQuery (приятно начать, если вы новичок, так как это облегчит разработку Javascript), и плагин JQuery Tooltip найден здесь

Answer 2

Наиболее красивым решением, вероятно, было бы использование jQuery и плагина всплывающей подсказки jQuery, как упоминалось выше. Если вы действительно хотите избежать использования javascript, вы можете достичь этой цели, просто используя css:

<div id="bigdiv">
bla
<div id="tooltip">this is a bla</div>
</div>

#tooltip{
  display:none;
}
#bigdiv:hover #tooltip{
  display:block;
}

Answer 3

Вы также можете использовать Yahoo! Библиотека пользовательского интерфейса (YUI), похожая на jQuery. На самом деле это очень вероятно, что они использовали на Yahoo! Ответы на сайте.

Взгляните на их очень полезный сайт. http://developer.yahoo.com/yui/container/overlay/

Answer 4

Да, это можно сделать с помощью JavaScript.

Вы должны написать события для наведения мыши и наведения мыши на текстовом элементе. Создайте div с применением некоторого стиля и покажите текст внутри элемента как innerText div. Установите положение div в соответствии с текстовым элементом.