|
||||||||||||
Меню сайта
Реклама на сайте:
|
Создаем удобный тултип на HTML и CSS.Урок №12 Тултип — это всплывающее уведомление, как правило работающее по наведению или по клику. Всплывающая подсказка часто используется для указания дополнительной информации о чем-то, когда пользователь перемещает указатель мыши на элемент. Тултип это сплывающая подсказка при наведении.Где правильно расположить тултип? Правильное расположение тултипа — справа от элемента, к которому он прикреплен. Бывает, что места не хватает, тогда его располагают в следующем порядке по убыванию приоритета:
Тултип не должен закрывать важную информацию на странице — от этого тоже может меняться его местоположение. CSS-код – это своеобразный список инструкций и указаний для браузера, по тому что, где и как отобразить (элементы web-страницы). Элементами - теги XHTML/HTML и их содержимое. Стиль - набор параметров, задающий внешнее представление объекта. Например, мы хотим, чтобы все заголовки первого уровня теги <h1>) на одной странице имели красный цвет, размер - 19 и были написаны курсивом, а на другой странице чёрного цвета, размера - 10. Заголовок - это объект, а цвет, размер и начертание - это параметры. Просто параметры нашего объекта для разных страниц разные, то есть они отличаются стилем. Каждый элемент на странице имеет свой стиль это - параграфы, заголовки, линии и. тд. Набор стилей всех элементов называется таблицей стилей CSS. Пример кода HTML: <span class="tooltip"> <button class="tooltip__btn" aria-describedby="some_id"><Термин</> <span class="tooltip__txt" role="tooltip" id="some_id"> <span class="visually-hidden">Тултип:</span> Описание термина </span> Пример кода CSS: .tooltip { position: relative; } .tooltip__btn { border: none; border-bottom: 1px dashed currentColor; padding: 0; color: #000; background-color: transparent; cursor: pointer; } .tooltip__txt { position: absolute; left: 0; top: calc(100% + 5px); z-index: 3; padding: 20px; width: max-content; max-width: 370px; box-shadow: 0 0 29px rgb(0 0 0 / 32%); font-weight: 400; font-size: 14px; line-height: 200%; color: #fff; background: #222; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease-in-out,transform .3s ease-in-out,visibility .3s ease-in-out; } .tooltip__btn:hover + .tooltip__txt { opacity: 1; visibility: visible; transform: translateY(0); } .tooltip__btn:focus + .tooltip__txt { opacity: 1; visibility: visible; transform: translateY(0); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0) } В целом простой, и несложный код. Просто делаем блок внутри блока и показываем его. Тут ключевая особенность как раз в методе показа — не только по hover, но и по focus, чтобы с клавиатуры легко «достать» элемент. И тут как раз нам помогает кнопка, которая этот самый фокус по умолчанию имеет. Пример работы тултипа смотрите ниже: Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Тултип: Пример термина тултип. Следующий пример тултипа отнесём к рангу уведомлений. код CSS во втором примере будет такой же, а вот html изменится. Пример кода HTML: (тултип-уведомление) <span class="tooltip"> <button class="tooltip__btn" aria-labelledby="warn-tooltip"> <><use xlink:href="#warn"></use></> </button> <span class="tooltip__txt" role="tooltip" id="warn-tooltip"<!</span> </span> Пример работы тултипа (уведомления) смотрите ниже: Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Уведомление! Отсутствует текст в кнопке. Он здесь и не нужен, при фокусе нужно сразу читать содержимое тултипа.
(!) Аналогичный приём с всплывающей подсказкой при наведении курсора на ссылку можно посмотреть На этой странице.
Читайте также:
|