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

imeges

 

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

В этой статье я расскажу как можно сделать всплывающую подсказку в тексте, с помощью обычного визуального редактора jckeditor3.4.7. И речь пойдёт о том как можно в этом редакторе сделать такие варианты подсказок как обычная всплывающая подсказка в тексте при наведении курсора радом с ним будет появляться текстовая подсказка. И второй вариант это как сделать подсказку в PopUp окне, такой

 вариант может понадобиться когда текст занимает много места. И это будет удобно для посетителя вашего сайта, так как ему не нужно открывать другую страничку для прочтения этой подсказки или разъяснения. Он так же остаётся на этой странице и может прочитать подсказку или разъяснение к тексту в PopUp окне. Для таких вариантов есть наверное и дополнительные плагины. Но для чего нужно загружать сайт разными дополнительными приложениями, если такая возможность сделать всплывающую подсказку и открывающееся PopUp окно есть прямо в редакторе.  Дальше я расскажу как это сделать. Показывать,  как это делается я буду в визуальном редакторе joomlaCK по одной причине просто потому что этим редактором я пользуюсь сам.  И так приступим для того что бы сделать обычную всплывающую подсказку вам нужно просто выделить текст так же как при создании ссылки.

 

imeges

 

 

И нажимаем на кнопку в редакторе \Редактировать/создать ссылку\ после чего вам откроется дополнительное окно  в котором вам нужно просто как обычно настроить ссылку. Если вы не желаете ставить ссылку то в этом поле можно просто поставить знак решётки.

 

imeges

 

 

Для того что бы выводилась всплывающая подсказка для этой ссылки вам нужно перейти в вкладку \ Расширенный \ и в поле \ Заголовок \ прописать текст который будет служить подсказкой для этой ссылки

 

imeges

 

 

Теперь после сохранения материала при наведении курсора на эту ссылку будет выводится всплывающая подсказка для нее.

 

Вариант примера такой ссылки:

Для того что бы посмотреть пример просто наведите курсор на этот текст.

 

В поле цель вам нужно только выбрать как будет открываться ваша ссылка то есть в этом окне , в другом окне или в другой вкладке….

Ну что с первым вариантом вроде разобрались теперь перейдём  к варианту вывода подсказки в всплывающем окне PopUp.

Для начала мы так же выделяем текст как и в первом варианте, и нажимаем на кнопку \Редактировать / Создать ссывку\

 

imeges

 

 

Но в открывшемся окне мы не будем вставлять ссылку, а переходим сразу во вторую вкладку  \ Цель \ и в этой вкладке выбираем цель ( всплывающее окно )

 

imeges

 

 

А так же настраиваем его так как нам нужно. Для этого отмечаем галочками нужные нам настройки, устанавливаем ширину и высоту для всплывающего окна и в поле позиция слева и позиция сверху устанавливаем позицию для открытия нашего Popup окна. После чего возвращаемся в первую вкладку \ Информация ссылки \  где замечаем что у нас появилась кнопка \ Просмотреть на сервере \ 

 

imeges

 

 

Мы кликаем по этой кнопке и у нас открывается дополнительное окно

 

imeges

 

 

В котором в левом выпадающем меню мы можем выбрать несколько вариантов файлов которые мы хотим открывать в окне PopUp. Для подсказки можно выбрать просто текстовый файл создать к примеру его в блокноте и с помощью кнопки \ Выбрать файл \ а затем поместить его на сервере. После того как он появится в списке вам нужно его выбрать из списка, кликнуть на этом файле в списке и ссылка автоматически пропишется .

 

imeges

 

 

Теперь мы сохраняем всё нажимая кнопку ОК  после чего сохраняем наш материал в редакторе и переходим к просмотру нашего творчества на сайте. Так же есть ещё дополнительные настройки с которыми я думаю вы сможите разобраться сами немного поэксперементировав с ними. Так же вы можите создавать не только всплывающие подсказки в PopUp окне но и вставлять в эти окна картинки флеш и гиф анимацию и многое другое.Далие я приведу пару примеров кликнув на которые вы можите посмотреть их работу в действии.

 

Это пример ссылки с открывающейся картинкой в PopUp окне.

 

Это пример ссылки открывающей PopUp окно с произвольным текстом.

 

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

В комментариях запрещается:
1) Писать оскорбительные выражения в сторону как администратора, модератора так и других пользователей сайта. (За такое нарушение сразу бан)
2) Реклама в любом ее проявлении, а так же рекламные ссылки на свои сайты, партнерские ссылки, для ссылки на свой сайт нужно использовать специальное поле для добавления ссылки.
3) Прежде чем писать комментарий и задавать вопрос обязательно убедитесь, что на ваш вопрос точно нет ответа на сайте. Так же на сайте есть форум, где вы можете задавать вопросы другим участникам этого форума...
ВНИМАНИЕ: ПРАВИЛА МОГУТ ДОПОЛНЯТЬСЯ И ИСПРАВЛЯТЬСЯ, В ТЕЧЕНИИ ВРЕМЕНИ СУЩЕСТВОВАНИЯ САЙТА БЕЗ ПРЕДУПРЕЖДЕНИЯ. ПОЭТОМУ ЧИТАЙТЕ ИХ ОБЯЗАТЕЛЬНО, ВО ИЗБЕЖАНИЕ НЕДОРАЗУМЕНИЙ.


Защитный код
Обновить

 

 

 

Custom Search

 

 

Читаем так же:

Отправить в FacebookОтправить в Google BookmarksОтправить в TwitterОтправить в LinkedInОтправить в BobrdobrОтправить в LivejournalОтправить в MoymirОтправить в OdnoklassnikiОтправить в VkcomОтправить в Yaru