Всплывающее окно при наведении курсора CSS3 и HTML5

Question

Привет всем, в настоящее время я пытаюсь разработать сайт HTML5 и CSS3.Что я хочу сделать, так это когда пользователь наводит курсор на область ввода веб-сайта, и я хочу, чтобы рядом с позицией мыши отображалось небольшое всплывающее сообщение для отображения информации для пользователя.

Возможно ли это, если не с HTML5 и CSS3, а с использованием чего-то другого.

Answer 1

Вот очень упрощенное решение, которое я использую в качестве основы для своих форм.

<style>
.help {
    background-color: #FFFF73;
    border-radius: 10px;
    display: none;
    opacity: 0.9;
    padding: 10px;
    z-index: 100;
}

.help_link:hover + span {
    display: inline;
}
</style>

<form>
    <label>Input: <input type="text" name="text" /></label> <a href="#" class="help_link">Help</a> <span class="help">Some help here on this input field.</span><br />
    <label>Input: <input type="text" name="text2" /></label> <a href="#" class="help_link">Help</a> <span class="help">Some help here on this input field.</span><br />
</form>

Применяются обычные заявления об отказе от ответственности: это основа, не будет работать в IE без внешней библиотеки для добавления расширенных селекторов, радиус границы не поддерживается в Firefox 3.5 и т. д.

Answer 2

<input type="text" title="info for user here"/>

Вы можете навести курсор на поле ввода текста, и заголовок позволит всплывающее сообщение с подсказкой.