Сайт о телевидении

Здравствуйте, уважаемые друзья. На днях один из моих заказчиков обратился ко мне с просьбой доработать его сайт. А точнее, сделать новую форму заявки на сайте, так как старая форма сменилась.

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

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

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

Пример реализации всплывающей подсказки

Итак, весь процесс займёт у вас не более 5 минут. Для начала нужно определиться, как будет выглядеть объект, привлекающий внимание. То есть это может быть изображение Так выглядит простая всплывающая подсказка, созданная с помощью CSS стилей. И привязанная к изображении. или .

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

ССЫЛКА НА ИЗОБРАЖЕНИЕ " alt="подсказка" />ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ

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

СЛОВО ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ

Теперь нужно вставить стили в вашу таблицу стилей CSS, в большинстве случаев это файл style.css.

Открываете административную панель WP — «Внешний вид» — «Редактор» — «Таблица стилей» и вставляете в самом конце вот эти стили.

Help { color: #2C8505; outline: none; /*цвет подсказки*/ cursor: help; text-decoration: none; /*вид курсора при наведении, можно заменить на pointer*/ position: relative; /*позиция*/ } /*положение всплывающей подсказки*/ .help span { margin-left: -999em; position: absolute; } /*подсказка при наведении курсора*/ .help:hover span { font-family: Verdana, Tahoma, Geneva, sans-serif; /*шрифт*/ position: absolute; /*позиция*/ left: 10px; top: 25px; z-index: 99; margin-left: 0; width: 200px; /*ширина блока подсказки*/ } /*параметры изображения*/ .help:hover img { border: 0; } /*блок всплывающей подсказки*/ .airhelp { background: none repeat scroll 0 0 rgba(97, 177, 255, 0.9); /*цвет и прозрачность фона*/ border: 1px solid #2b82b8; /*параметры бордюра*/ border-radius: 5px; /*закругление углов*/ box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); /*тень блока*/ color: #fff; /*цвет шрифта всплывающей подсказки*/ padding: 5px; /*внутренний отступ*/ }

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

HTML подсказка — это блок с дополнительной информацией, который появляется при наведении курсора мыши на определенный элемент веб-страницы. Сегодня мы создадим собственную всплывающую подсказку с помощью HTML и CSS :

Посмотреть демо-версию | Скачать исходный код

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

Нам нужно создать HTML-документ и задать исходную разметку:

Tooltips Demo // контент

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

Я создал div с классом container , в который мы поместим основные примеры всплывающих подсказок HTML . Вот стили для body и класса .container :

body { font-family: "Work Sans", sans-serif; font-size: 1.5em; line-height: 1.4em; font-weight: 700; background-color: #28ABE3; color: #fff; } .container { width: 800px; margin: 100px auto; background: radial-gradient(circle farthest-corner at 400px 250px , #64BBE0 0%, #28ABE3, #28ABE3 95%); }

Я отцентрировал div контейнера, присвоив для margin-left и margin-right значения auto . Также добавил несколько стилей для раздела body , чтобы он выглядел лучше.

Я решил добавить для фона небольшой светлый CSS-градиент . Если браузер не поддерживает CSS-градиенты (это касается в основном IE 8 и 9 ), цвет фона будет переключен обратно на синий по умолчанию (цвет фона раздела body ).

Я буду использовать HTML подсказки при наведении с тегами анкоров, но вы можете назначить классы других встроенных элементов, таких как strong tag или span . Ниже приводится содержимое div контейнера:

• Tooltip bottom
• Tooltip left

  Я назначил для ссылок два класса. Класс tooltip будет отвечать за тело подсказки, а второй — определять ее размещение.

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

  Создание класса tooltip

  Ниже приведен код класса tooltip :

  Tooltip { position: relative; } .tooltip:after { position: absolute; padding: 8px; border: 3px solid #fff; border-radius: 8px; background-color: #1FDA9A; font-size: .9em; font-weight: bold; color: #fff; content: attr(data-tooltip); min-width: 80px; /* width: -moz-max-content; */ /* width: -webkit-max-content; */ opacity: 0; transition: all .2s ease-in-out .25s; visibility: hidden; z-index: 2; } .tooltip:hover:after { opacity: 1; visibility: visible; }

  Сама HTML всплывающая подсказка при наведении — это псевдоэлемент :after , она позиционируется абсолютно. Вот почему необходимо присвоить относительную позицию элементу анкора. Я добавил несколько основных стилей, такие как отступ, рамка, размер шрифта и ширина. Давайте более внимательно рассмотрим свойство content .

  Оно содержит attr() — значение, в котором хранятся наши пользовательские data-tooltip , и использующее их, чтобы вывести текст самой подсказки. Вместо data-tooltip вы можете использовать любое другое имя, просто убедитесь, что оно начинается с data- . Больше о данных атрибутов вы можете узнать здесь .

  Тело подсказки имеет минимальную ширину 80 пикселей. Если нужно, чтобы содержимое подсказки растягивалось в одну строку, то добавьте для свойства ширины значение max-content , которое в данный момент вынесено в комментарии. Следует отметить, что это экспериментальная функция, поэтому вы должны использовать вендорные префиксы -webkit- и -moz- .

  Чтобы задать для HTML подсказки при наведении эффект слайд-анимации, мы используем свойство transition . Обратите внимание на значение .25s , которое указывает задержку перед тем, как подсказка отображается или скрывается. Таким образом, она не будет выводиться, если вы наведете курсор мыши на текст по ошибке, а только при наведении курсора на более продолжительное время. Я также задал непрозрачность 0 и видимость hidden . Мы не можем использовать display: none; , потому что элемент полностью исчезнет, и мы не увидим каких-либо эффектов перехода. Непрозрачность и видимость изменяются при наведении на элемент указателя мыши.

  Результат:

  Посмотреть

  Примечание: Я изменил / удалил часть разметки и стилей в демо-версии на CodePen . Чтобы увидеть окончательный результат, посмотрите демонстрационный пример в конце этой статьи.

  Добавление движения

  Теперь, когда мы реализовали появление / исчезновение HTML всплывающей подсказки при наведении, давайте заставим ее двигаться. Мы уже назначили свойство анимации, и нам осталось задать исходную позицию, откуда она должна появляться, и конечную:

  /*Исходная позиция подсказки*/ .tooltip-top:after { bottom: 150%; left: 0; } .tooltip-bottom:after { top: 155%; left: 0; } .tooltip-left:after { right: 130%; min-width: 100px; } .tooltip-right:after { left: 130%; min-width: 100px; } /*Конечная позиция подсказки*/ .tooltip-top:hover:after { bottom: 120%; } .tooltip-bottom:hover:after { top: 125%; } .tooltip-left:hover:after { right: 110%; } .tooltip-right:hover:after { left: 110%; }

  Я решил добавить этот функционал в дополнительные классы. Таким образом, если вы назначите, например, класс .tooltip-left , подсказка будет выводиться слева от текста, если добавите .tooltip-top , подсказка будет выводиться сверху, и т.д.

  Посмотреть демо

  В этой демо-версии я использую класс .tooltip-right . Вы можете поэкспериментировать и применить различные классы, чтобы задать различные позиции всплывающей подсказки HTML .

  Создание треугольника

  Последним элементом всплывающей подсказки является маленький треугольник на одной из сторон блока. Мы создадим его с помощью псевдокласса :before (псевдокласс :after уже использован для самой подсказки ). Мы назначаем его для наших четырех классов позиции, чтобы для каждой из них треугольник выводился соответственно:

  /** * Треугольники */ .tooltip-top:before, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:before { content: ""; display: block; position: absolute; border-width: 7px; border-style: solid; border-color: rgba(0, 0, 0, 0); opacity: 0; transition: all .2s ease-in-out .25s; visibility: hidden; } .tooltip-top:hover:before, .tooltip-bottom:hover:before, .tooltip-left:hover:before, .tooltip-right:hover:before { opacity: 1; visibility: visible; }

  Мы создаем треугольник, задав ширину для рамки, когда сам элемент не имеет ширины или высоты. В этом случае ширина рамки устанавливается в 7 пикселей. Цвет рамки является полностью прозрачным, что очень важно. В следующем фрагменте кода я назначаю цвет для соответствующей стороны рамки, что позволяет задать форму треугольника.

  Остальная часть стилей выглядит аналогично тому, что мы делали для тела HTML подсказки при наведении. У нас те же переходы, позиция является абсолютной, непрозрачность устанавливается на 0 и видимость — скрытая:

  /*Начальная позиция треугольника*/ .tooltip-top:before { top: -51%; left: 50%; transform: translateX(-50%); border-top-color: #fff; } .tooltip-bottom:before { bottom: -56%; left: 50%; transform: translateX(-50%); border-bottom-color: #fff; } .tooltip-left:before { left: -31%; top: 15%; border-left-color: #fff; } .tooltip-right:before { right: -31%; top: 15%; border-right-color: #fff; } /* Конечная позиция треугольника */ .tooltip-top:hover:before { top: -21%; } .tooltip-bottom:hover:before { bottom: -26%; } .tooltip-left:hover:before { left: -11%; } .tooltip-right:hover:before { right: -11%; }

  Чтобы заставить треугольник двигаться таким же образом, как и подсказка, нужно назначить начальную и конечную позиции.

  Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.

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

  Решение Способ, который я вам предложу, достаточно прост и эффективен. Работает во всех браузерах, даже в ІЕ 6 (Многократно тестировано мной). Легко изменим и удобен. Не загромождает код и делает его наглядным. Его можно легко изменить по свои нужды. Например, сделать задержку вывода подсказки через setTimeout или другое.HTML Предположим у нас есть HTML-страница со ссылкой, при наведении на которую нам нужно вывести подсказку:
  Всплывающие подсказки Ссылка
  Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
  Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div, который и будет контейнером для подсказки.
  Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.
  Ссылка
  Для хранения я использую атрибут data-tooltip.
  C HTML закончили - можно перейти к стилям.CSS Я использую библиотеку LESS Elements и всем советую, поэтому некоторые свойства я напишу с использованием данного фреймворка.
  @import "css/elements.less"; #tooltip { z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; color: white; .opacity(0.5); .rounded(5px); }
  С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.jQuery Ну а теперь самое интересное - jQuery.
  $.jQuery(document).ready(function() { $("").mousemove(function (eventObject) { $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip").text($data_tooltip) .css({ "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 }) .show(); }).mouseout(function () { $("#tooltip").hide() .text("") .css({ "top" : 0, "left" : 0 }); }); });// Ready end.
  Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.

  Вот и все!
  В итоге мы получим что-то такое: Демо

  Благодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.

  Спасибо за внимание!

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

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

  Ссылка на полезный ресурс

  Зададим базовый стиль для класса tooltip :

  Tooltip{ display: inline; position: relative; }

  Теперь подсказка будет выводится в одну строку со ссылкой с использованием относительного позиционирования. Теперь определим скругленные углы для блока подсказки и позиционируем ее сверху ссылки:

  Tooltip:hover:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px; }

  Мы используем псевдо-класс:hover , который выбирает элемент при наведении на него курсора мыши, и псевдо-класс:after , который добавляет содержание после выбранного элемента. Фон устанавливается частично прозрачным, а для браузеров, которые не поддерживают формат цвета RGBA, устанавливаем серый цвет фона.

  Закругленные углы создаются с помощью атрибута border-radius . Цвет текста делаем белым. В завершение, мы позиционируем блок подсказки и добавляем отступ.

  Кроме определения стилей и позиционирования задаем свойство content:

  Content: attr(title);

  Данное свойство позволяет вставлять содержание, которое может быть строкой, или атрибутом элемента. В данном случае используем атрибут title ссылки.

  Ссылка на полезный ресурс

  Для завершения нужно добавить стрелочку внизу подсказки. Используем псевдо-класс:before и стили для рамки:

  Tooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; }

  Для создания стрелки мы использовали трюк с рамкой:устанавливаем цвет рамки слева и справа прозрачным и управляем шириной рамки. Также стрелка позиционируется под подсказкой.

  Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.

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

  Решение Способ, который я вам предложу, достаточно прост и эффективен. Работает во всех браузерах, даже в ІЕ 6 (Многократно тестировано мной). Легко изменим и удобен. Не загромождает код и делает его наглядным. Его можно легко изменить по свои нужды. Например, сделать задержку вывода подсказки через setTimeout или другое.HTML Предположим у нас есть HTML-страница со ссылкой, при наведении на которую нам нужно вывести подсказку:
  Всплывающие подсказки Ссылка
  Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
  Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div, который и будет контейнером для подсказки.
  Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.
  Ссылка
  Для хранения я использую атрибут data-tooltip.
  C HTML закончили - можно перейти к стилям.CSS Я использую библиотеку LESS Elements и всем советую, поэтому некоторые свойства я напишу с использованием данного фреймворка.
  @import "css/elements.less"; #tooltip { z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; color: white; .opacity(0.5); .rounded(5px); }
  С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.jQuery Ну а теперь самое интересное - jQuery.
  $.jQuery(document).ready(function() { $("").mousemove(function (eventObject) { $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip").text($data_tooltip) .css({ "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 }) .show(); }).mouseout(function () { $("#tooltip").hide() .text("") .css({ "top" : 0, "left" : 0 }); }); });// Ready end.
  Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.

  Вот и все!
  В итоге мы получим что-то такое: Демо

  Благодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.

  Спасибо за внимание!