Бывают ситуации, когда нужно создать ссылку с подсказкой, для улучшения взаимодействия пользователя с сайтом. Или, нужно выделить в тексте несколько слов и создать к ним небольшие поясняющие подсказки, которые будут всплывать при наведении на это слово. Это, действительно бывает удобным.
Вот, пример ссылки, со всплывающей подсказкой при наведении на неё:
Либо, нам нужно просто выделить одно слово в тексте и сделать к нему пояснение (без ссылки/без перенаправления на другую страницу):
И как видим, мобильная адаптация - сохраняется:
Ниже, покажу основной принцип, как можно сделать всплывающие подсказки на ссылки и просто слова в тексте. Вся информация, будет предоставлена максимально просто для тех, кто только начинает работать с Mobirise и редактором кода.
Пожалуйста! Перед редактированием сайта, создавайте ОБЯЗАТЕЛЬНО резервные копии своих проектов.
Как создать всплывающую подсказку на ссылку в Mobirise?
Нам будет нужен редактор кода. Если у вас бесплатная версия Mobirise и нет официальный редактора кода, вы можете установить бесплатный редактор кода. Для этого, ознакомьтесь с заметками:
- «Как установить сторонние дополнения в Mobirise?»
- «Устанавливаем бесплатный редактор кода для Mobirise.»
Теперь, добавляем всплывающую подсказку, к нужной ссылке. У меня в примере, будет использован блок News с бесплатной темы Mobirise 5:
У себя, для наглядности, заменю ссылку «Read more..» в одном блоке на «Узнать больше...»:
Вы можете сразу указать нужную ссылку, на которую будет ссылаться данная ссылка:
Теперь, откройте в блоке редактор кода.
У меня в примере, будет использован бесплатный альтернативный редактор кода. Ссылки на загрузку и установку, смотрим выше.
В открывшемся редакторе, нас интересует HTML код блока. Ищем в нем ссылку «Узнать больше...» (52 строка кода, у вас может быть иначе). Находим свою ссылку, на которую ссылается ссылка (у меня, указана ссылка https://mobirise.com/ru/). Там будет примерно такой код (у вас может быть иначе, суть та же):
<a href="https://mobirise.com/ru/" class="text-primary">Узнать больше...</a></p>
Или такой код, если мы указывали, чтобы ссылка открывалась в новой вкладке:
<a href="index.html" class="text-primary" target="_blank">Узнать больше...</a><br></p>
Сразу после ссылки, через один пробел (по одному пробелу с каждой стороны вставляемого кода) после ссылки на страницу, ставим код:
data-toggle="tooltip" title="Указываем тут свой текст, для всплывающей подсказки."
Должно выглядеть у вас так:
Теперь, добавляем код JavaScript в «Параметры страницы» в «Конец кода <body>».
Если у вас бесплатная версия Mobirise, скачайте бесплатное дополнение, которое позволит вам, вставлять в каждую страницу произвольный код перед тегом <body>.
Владельцы платной версии Mobirise с официальным редактором кода, должны пропустить данный пункт. Данная функция по добавлению кода перед тегом <body>, предоставляется в настройках платной версии Mobirise.Для этого, откройте сайт: https://witsec.nl/
Выберите блок «Page Name» и нажимаем «LEARN MORE»:
После, на открывшейся новой странице, нажимаем «Download»:
После установки данного расширения для Mobirise, откройте настройки страницы:
Теперь, добавляем код JavaScript в «Параметры страницы» в «Конец кода <body>»:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Вот так, это выглядит:
На готовом результате, при предварительном просмотре страницы в браузере, мы получим данную картину:
Вы можете экспериментировать с данный способ в разных блоках и темах Mobirise.
Как создать всплывающую подсказку на любое слово в тексте?
В своем примере, буду использовать блоков «Статьи» из бесплатной темы Mobirise 5:
В данном блоке, хочу сделать всплывающую подсказку к слову «SEO-ссылки» в тексте при наведении на данное слово. Для этого, выделяем слово и ставим на него любую ссылку (мной была поставлена в данном примере ссылка на https://mobirise.com/ru/):
Теперь, открываем редактор кода и ищем данное слово (SEO-ссылки и ориентируемся на ссылку, которую мы указали на данном слове) в HTML коде, после чего, заменяем код вместе с ссылкой, на код:
data-toggle="tooltip" title="Наша всплывающая подсказка"
Как и в первом варианте, где мы делали всплывающую подсказку на ссылку, тут мы данную ссылку удаляем, однако, сохраняем по одному пробелу с каждой стороны вставляемого кода.
И добавляем код JavaScript в «Параметры страницы» в «Конец кода <body>» на данной странице, ели раннее, мы его не добавляли (смотрим выше, как его добавить):
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Повторюсь, если вы, создаете на одной странице несколько всплывающих подсказок для ссылок и/или слов в тексте, не нужно добавлять более одного раза код JavaScript на каждую страницу.
Смотрим результат:
Обратите внимание, что это не ссылка. При попытке нажать на слово или перейти на ссылку, ничего не произойдет. Ссылку мы убрали с вами (смотрим выше) и поставили всплывающую подсказку при наведении на слово.
При проверке результатов работы в предварительном просмотре через браузер, если у вас не отображаются изменения на странице, не забывайте чистить кэш браузера.
Заключение.
В данной заметке, постарался максимально просто описать возможность добавления всплывающих подсказок при наведении на ссылку или при наведении на любое слово. Методы рабочие, имеют мобильную адаптацию. Здесь не используются сторонние скрипты (используется Bootstrap CSS, на котором работает Mobirise) и как следствие, не должно возникать никаких конфликтов с CSS стилями.
Может быть полезным «Как добавить всплывающее фото при наведении на слово в Mobirise?»
Со своей стороны, у меня нет цели предоставить вам готовое и универсальное решение. Стремился показать основной принцип, чтобы создать всплывающие подсказки в Mobirise максимально просто. При этом, вы можете самостоятельно проводить эксперименты и улучшать данное решение. Успехов.