TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як додати підказку на веб -сайт Weebly?

1

Weebly не тільки пропонує можливість створення вашого сайту за лічені хвилини, але також пропонує численні можливості налаштування, щоб додати будь -які додаткові функції, які вам потрібні. Дозволення безкоштовним користувачам редагувати вихідний CSS та HTML -код є основною причиною успіху Weebly. Ми вже написали багато порад та хитрощів, а також віджетів, щоб зробити ваш веб -сайт більш професійним. І в цій статті ми продовжимо нашу серію віджетів віджетом підказки.

Як додати підказку на веб -сайт Weebly?

Підказка – це спливаюче вікно, яке з’являється, коли миша наводиться на певний термін або значок довідки. На мобільному пристрої поява та зникнення підказки є подіями дотику або їх можна повністю деактивувати. Підказки можна використовувати багатьма корисними способами:

  • Додайте скорочення, синоніми та абревіатури.
  • Покажіть один із ваших продуктів і зв’яжіть термін підказки зі сторінкою товару.
  • Розмістіть рекламне або партнерське посилання всередині підказки.
  • Показувати пов’язане зображення із пов’язаним терміном.
  • Розмістіть перекладене слово іншою мовою.
  • Надайте більше інформації про термін.

Підказка – одна з функцій, які більшість із вас хотіли б вставити на свій веб -сайт Weebly, щоб надати додаткову інформацію про певний вміст. Існує багато способів додати підказку до вашого вмісту:

  • Використання тегу заголовка HTML.
  • Використання простого 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 data-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 став ефективним лише для цієї сторінки.

Як додати підказку на веб -сайт Weebly?

Додайте код заголовка на сторінку

Додавання користувацького HTML

Частина HTML підказки розміщується у вашій області вмісту, куди потрібно вставити підказку за допомогою елемента " Вставити код ".

Джерело запису: webnots.com

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі