
Как при наведение на текст вывести дополнительное окно с подсказкой. Уроки HTML.
Добрый день! Друзья, не давно я наткнулся на один буржуйский сайт. Естественно этот сайт посвящен тематикам, которые подходят для наших блогов. Там авторы выкладывают много различных скриптов и всякого рода примочек для построения сайта. А наткнулся на такой сайт, когда в старом добром Google искал плагин для вывода дополнительной информации над текстом в виде подсказок. Плагин я нашёл, но страницу с ним в тот же миг закрыл, когда увидел, что ниже в поисковой строке, есть более альтернативный вариант — это скрипт.
Содержание статьи:
1. Как установить скрипт по выводу сплывающей подсказки при наведении на текст.
2. Как пользоваться скриптом.
3. Как установить и использовать плагин Tooltip.
Скачал скрипт, установил, проверил. Работает он как часы. Очень аккуратный и красивый. Скинул себе на в оБлако на mail. Немного перевел инструкцию по установке.
Как установить скприпт на блог?
Шаг 1.
В архиве будет содержаться файл alttxt.js. Копируете и кидаете этот файл через FTP-клиент в папку ваш_сайт.ru/wp-admin/js/alttxt.js.
ШАГ 2.
А в шапке сайта после тегауказываете путь к этому сайту, прописав следующее:
1 | <script src="/wp-admin/js/alttxt.js" language="javascript"></script> |
ШАГ 3.
Дальше прописывает стили, для этого открывает файл в папке с шаблоном для вашего сайта style.css и в конце документа вставляем следующий код:
1 2 3 4 5 6 7 8 9 10 | .navtext { text-align:left; width:235px; font:bold 9pt sans-serif; border-width:2px; border-style:outset; border-color:white; background-color:tan; layer-background-color:tan; color:black; } |
ШАГ 4.
Осталось только в подвале сайта добавить тeг со следующими параметрами:
1 | <div id="navtxt" class="navtext" style="position: absolute; top: -100px; left: 0px; visibility: hidden;"></div> |
Как пользоваться скриптом?
Что бы использовать функции данного скрипта при написании текста, делаем следующее. Пишем любой текс а далее зачлючаем его в тег со следующими параметрами:
1 | <a href="javascript:void(0)" onmouseover="writetxt('Здесь будет любой всплывающий текст')" onmouseout="writetxt(0)">Наведи курсор на меня</a> |
В общем это будет выглядеть так:
Для данной цели можно использовать плагин Tooltip. Но лучше использовать скрипт.
Плагин Tooltip.
Плагин Tooltip позволяет при наведении на текст выводить текстовые подсказки.
Как устанавливать плагины вы знаете 🙂
Настраивать ничего не нужно. После активации он уже сразу рабочий.
Заходите в визуальный редактор текста. В панели инструментов у вас появится вот такой значок:
При нажатии на значок, появиться окно с тремя полями. В первом вводите текс, во второй строке будет текс, который будет появляться в виде подсказки при на ведении на текст записанный в первой строке. В третьей строке указываете ссылку по необходимости.

Вот так он выглядит в работе:
Вот такие красивые примочки существуют при редактировании текста. Красиво всё выглядит, не правда ли? 🙂
P.S.— Ещё если скрипт, который позволяет сделать текст скрытым, про это я писал здесь.
Автор блога, Александр Рус.
Полезная штука. Я как-то раз прочитал одну статью про всплывающие окна, установил у себя на сайте, но потом снес. Мне не понравилась реализация. Примитивная она какая-то была. А здесь все вроде бы красиво. Попробую. Спасибо.
Вот как раз в HTML у меня постоянно проблемы. Если случайно удалишь какой-нибудь символ, то потом очень сложно все исправить.
Если какой нибудь косяк, то проще с резервной копии файл скопировать и заменить тот который вы редаткировали.