Как добавить всплывающую подсказку на сайт Weebly?

Weebly не только предлагает возможность создания вашего сайта за считанные минуты, но также предлагает множество возможностей настройки для добавления любых дополнительных функций, которые вы хотите. Разрешение бесплатным пользователям редактировать исходный код CSS и HTML – основная причина успеха Weebly. Мы уже написали множество советов и приемов, а также виджетов, которые помогут сделать ваш сайт Weebly более профессиональным. И в этой статье мы продолжим нашу серию виджетов с помощью виджета всплывающей подсказки.

Всплывающая подсказка – это всплывающее окно, которое появляется при наведении курсора мыши на определенный термин или значок справки. На мобильном устройстве появление и исчезновение всплывающей подсказки является сенсорным событием или может быть полностью деактивировано. Всплывающие подсказки можно использовать разными способами:

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

Всплывающая подсказка – это одна из функций, которую большинство из вас хотели добавить на свой сайт Weebly, чтобы предоставить дополнительную информацию о конкретном контенте. Есть много способов добавить всплывающую подсказку к вашему контенту:

  • Использование тега HTML Title.
  • Используя простой CSS.
  • Использование расширенного CSS.

В этой статье мы объясним, как добавить всплывающую подсказку на сайт Weebly с помощью простого кода HTML и CSS. Также можно добавлять всплывающие подсказки с помощью скриптов, которые мы не будем рассматривать в этом руководстве. Вы можете проверить всплывающие подсказки на нашей демонстрационной странице.

Добавление всплывающей подсказки с тегом заголовка HTML

Самый простой способ добавить всплывающую подсказку к любому конкретному термину в вашем контенте – использовать тег Title. Поле всплывающей подсказки будет основано на стиле браузера по умолчанию, и вам не нужно добавлять для этого какой-либо CSS. Ниже приведен пример добавления всплывающей подсказки с помощью тега Title. Наведите указатель мыши на выделенный контент, чтобы увидеть всплывающую подсказку.

наведите указатель мыши сюда

В редакторе Weebly используйте «Код для вставки», Чтобы добавить контент вместе с тегом Title для вставки всплывающей подсказки. Ниже приведен пример использования тега Title в элементе Span:

This is a simple tooltip and <span title="Tooltip with Title tag">move your mouse over here </span>to see it in action.

Настройка окна всплывающей подсказки с помощью CSS

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

Наведите указатель мыши на эту подсказку с пользовательским кодом CSS.

HTML-код приведенной выше подсказки выглядит следующим образом:

<p class="demo" data-tool-tip="Tooltip with custom CSS">Move your mouse over to see this tooltip with custom CSS code</p>

И CSS выглядит следующим образом:

<style>
.demo,
.demo p {
margin: 4em 0;
text-align: center;
}

[data-tool-tip] {
position: relative;
z-index: 2;
cursor: pointer;
}

[data-tool-tip]:before,
[data-tool-tip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}

[data-tool-tip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tool-tip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}

[data-tool-tip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}

[data-tool-tip]:hover:before,
[data-tool-tip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
</style>

Всплывающие подсказки с использованием расширенного CSS

Не всегда нужно добавлять всплывающую подсказку к определенному термину; в большинстве случаев вы можете создать дополнительное окно справки (обычно это знак вопроса), чтобы предоставить дополнительные пояснения. Для этого требуется использование расширенного CSS для настройки окна всплывающей подсказки, и здесь мы предлагаем три способа создания такой всплывающей подсказки, содержащей простой текст, содержимое HTML и изображение.

Добавление подсказки с простым текстом

Ниже приведена простая всплывающая подсказка, появляющаяся при наведении курсора мыши и исчезающая, когда мышь перемещается. Он содержит только текст, а поле настраивается с помощью кода CSS.

Подсказка с HTML-контентом

Что, если вы хотите добавить ссылки или любой HTML-контент во всплывающую подсказку? Посмотрите демонстрацию ниже, и вы можете добавить любые HTML-теги, такие как ссылка, полужирный шрифт и т. Д., Во всплывающую подсказку.

Изображение во всплывающей подсказке

Третий случай – добавить изображение во всплывающую подсказку и посмотреть демонстрацию ниже, показывающую изображение в поле всплывающей подсказки.

CSS для всех трех вышеупомянутых всплывающих подсказок такой же, как показано ниже:

<style>
/* content box */
#tool_tip{
background-color: rgba(128, 128, 128, 0.07);
border-radius: 4px;
padding: 40px 40px 10px 30px;
max-width: 600px;
position: relative;
margin: 0 auto;
/* font-size: 18px; - use only if required
/* line-height: 28px; - use only if required */
}

/* Tooltip */
.help-tip{
position: absolute;
top: 18px;
right: 18px;
text-align: center;
background-color: #4F798E;
border-radius: 50%;
width: 24px;
height: 24px;
line-height: 26px;
cursor: default;
}

.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}

.help-tip:hover p{
display:block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}

.help-tip p{
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 13px; /* Change the font size inside tooltip */
line-height: 1.4;
}

.help-tip p:before{
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
right:10px;
top:-12px;
}

.help-tip p:after{
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}

@-webkit-keyframes fadeIn {
0% { 
opacity:0; 
transform: scale(0.6);
}

100% {
opacity:100%;
transform: scale(1);
}
}

@keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
}

/* Adjust tooltip size on mobile devices */
@media screen and (max-width: 480px) {
.help-tip p{
width: 200px;
}
}
</style>

HTML-код всех трех подсказок приведен ниже:

<!-- HTML Code for Tooltip -->

<!-- Text Tooltip-->
<div id="tool_tip">
<div class="help-tip">
<p>This is a tooltip appears on mouse hovering.</p>
</div>
<p>This is a simple tooltip with just text display on hovering. Check it!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p>
</div>

<!-- Tooltip with HTML Content -->
<div id="tool_tip">
<div class="help-tip">
<p>This is a tooltip with <b>HTML tags!</b> inside. <a href="https://www.webnots.com/">Here is a link!</a> You can insert any <i>HTML tag!</i></p>
</div>
<p>This tooltip has HTML tags inside. Check it!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p>
</div>

<!-- Tooltip with Image inside -->
<div id="tool_tip">
<div class="help-tip">
<p>This tooltip has a picture too! < /br>< /br></p><p><img src="https://img.webnots.com/2015/06/Weebly-Site-Building.png" width="300" /></p>
</div>
<p>Also include a showcasing image inside the tooltip. Check it!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p>
</div>

Вы можете скопировать / вставить содержимое CSS и HTML, используемое в этой демонстрации, и настроить в соответствии с вашими потребностями. Замените ссылку и URL изображения своими собственными.

Добавление CSS и HTML на сайт Weebly

Есть два способа добавить CSS в Weebly:

  • Добавьте его в “main.less», Чтобы применить стили по всему сайту.
  • Добавьте его в “Код заголовка»На определенной странице, чтобы CSS действовал только на этой странице.
Добавить код заголовка на страницу
Добавить код заголовка на страницу

Добавление собственного HTML

HTML-часть всплывающей подсказки должна быть размещена в области содержимого, куда вы хотите вставить всплывающую подсказку, используя «Код для вставки”Элемент.

Похожие записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *