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

Как сделать выподающую текстовую подсказку

Как при наведение на текст вывести дополнительное окно с подсказкой. Уроки HTML.


07.01.2015 | ПлагиныРубрика: Скрипты | Теги: , комментария 3 | 9478 просмотров | Автор статьи: Александр Рус


Добрый день! Друзья, не давно я наткнулся на один буржуйский сайт. Естественно этот сайт посвящен тематикам, которые подходят для наших блогов. Там авторы выкладывают много различных скриптов и всякого рода примочек для построения сайта. А наткнулся на такой сайт, когда в старом добром 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 позволяет при наведении на текст выводить текстовые подсказки.

Скачать плагин можете здесь.

Как устанавливать плагины вы знаете 🙂

Настраивать ничего не нужно. После активации он уже сразу рабочий.
Заходите в визуальный редактор текста. В панели инструментов у вас появится вот такой значок:

Плагин tooltip

Как выглядит значок плагина в редакторе.


При нажатии на значок, появиться окно с тремя полями. В первом вводите текс, во второй строке будет текс, который будет появляться в виде подсказки при на ведении на текст записанный в первой строке. В третьей строке указываете ссылку по необходимости.
Плагин Tooltip

Вот так он выглядит в работе:

Плагин Tooltip в работе

Плагин Tooltip в работе.


Вот такие красивые примочки существуют при редактировании текста. Красиво всё выглядит, не правда ли? 🙂
P.S.— Ещё если скрипт, который позволяет сделать текст скрытым, про это я писал здесь.

Автор блога, Александр Рус.

Материалы по теме:

Классический виджет для WordPress
Всем привет! Как многие заметили, совсем недавно было обновление Wordpress до версии 4.8. С новым обновлением, как обычно это бывает, появляются новые проблемы. И на ...
Как скрыть реферальную ссылку
Приветствую всех своих читателей. Давайте рассмотрим, как скрыть свою реферальную ссылку от пользователей. Чтоб при переходе умные пользователи не думали, что помогают, кому то зарабатывать. ...
Как добавить форму комментариев Vkontakte
Всем привет! Недавно, мне поступил заказ от клиента, он хотел, что бы я на его блоге разместил другую форму комментариев. От предложенного мною плагина ...
Плагин de:comment. Как скрыть ссылки в комментариях.
Доброго всем дня! Данный пост посвящается всем тем блогерам, которые пользуются плагином de:comment. Расскажу Вам коротко мою историю работы с ним. Приобрел это форму комментариев ...
ShortPixel плагин для сжатия изображений.
Всем привет! Прошлая моя статья была про очень полезную программку для сжатия изображений - jpegoptim. Именно этот способ сжатия и рекомендует google. Более подробнее о ...

Нажимая на кнопку, я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности.

1
Виктор http://www.victorvolodin.ru

Полезная штука. Я как-то раз прочитал одну статью про всплывающие окна, установил у себя на сайте, но потом снес. Мне не понравилась реализация. Примитивная она какая-то была. А здесь все вроде бы красиво. Попробую. Спасибо.

2
Екатерина

Вот как раз в HTML у меня постоянно проблемы. Если случайно удалишь какой-нибудь символ, то потом очень сложно все исправить.

Автор3
Александр Рус (участник БКС) http://myworkpro.ru/

Если какой нибудь косяк, то проще с резервной копии файл скопировать и заменить тот который вы редаткировали.

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.