Разное

Всплывающая подсказка html: Как добавить всплывающую подсказку к изображению?

12.09.1990

Всплывающая подсказка HTML

Опубликовано:

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

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

Содержание

Всплывающая подсказка

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

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

На рабочем столе подсказка появляется, когда человек наводит курсор на элемент, не нажимая его.

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

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

Ограничения для подсказок на основе HTML

  1. Они не будут работать старых браузерах.
  2. Содержимое HTML не будет экспортироваться в форматы изображений. Обычно курсор скрыт при экспорте в изображения.

 

Проблемы, с которыми связаны всплывающие подсказки:

  • Не отображаются на мобильных телефонах.
  • Отсутствие шаблона. Вы должны все придумать с нуля! Если вы хотите найти шаблоны, вы должны сделать это по собственной инициативе.
  • Каждый аспект должен быть указан вручную. Если вы посмотрите код, то увидите, что там есть отступы, расположение, поля, цвета, видимость, ширина, высота и т.п.
  • Нужно закодировать не только текст подсказки, но и то, что происходит, когда вы наводите на нее курсор мыши.
  • Вам нужно дублировать содержимое каждый раз, когда вы хотите добавить где-то новую подсказку! Представьте, что цвет, шрифт или стиль отличаются для каждой новой подсказки!
  • Легко допустить ошибку.

Синтаксис HTML

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

<a href=”” title=”tooltip_text”> Content </a>

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

Заголовок считается главным атрибутом, поэтому он позволяет пользователю легко добавить его к элементу. С его помощью можно добавить что угодно. По сути, всплывающая подсказка отображается над элементом.

Всплывающую подсказку можно разместить в разном положении

 

Подсказка может размещаться:

  • Верхнее положение. Всплывающая подсказка размещается в верхней части элемента.
  • Нижнее положение. Всплывающая подсказка размещается внизу элемента.
  • Положение справа. Всплывающая подсказка размещается справа от элемента.
  • Положение слева. Всплывающая подсказка размещается слева от элемента.

В заключении

Самый простой способ создания подсказок — без использования кода.

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

 

 

 

Статья вам помогла?

Подсказки.

Компоненты · Bootstrap. Версия v4.1.3

Документация и примеры добавления настраиваемых всплывающих подсказок Bootstrap с CSS и JavaScript, использует CSS3 для анимации, и атрибуты данных для хранения локальных заголовков.

Обзор

Вот что надо знать перед началом работы с плагином подсказок:

  • Подсказки зависят от 3-й части бибилотеки Popper.js в части позиционирования. Вы должны подключать popper.min.js или использовать
    bootstrap.bundle.min.js     / bootstrap.bundle.js, содержащие Popper.js – это нужно для работы подсказок!
  • Если вы подключаете файлы JavaScript с жесткого диска, вам нужна requires util.js.
  • Подсказки не инициализируются и не используются по умолчанию по причинам производительности, так что вам надо сделать это самому.
  • Подсказки с названием нулевой длины никогда не отображаются.
  • Задайте container: 'body' чтобы избежать проблем с отрисовкой более сложных компонентов (таких как группы ввода, кнопок и т.
    д.).
  • Нельзя запускать подсказки из скрытых элементов.
  • Подсказки для элементов класса .disabled или с атрибутом disabled должны запускаться из элемента-«обертки».
  • Когда подсказка запускается из многострочных ссылок, подсказки будут центрированы. Используйте white-space: nowrap; в ваших <a>, чтобы избежать этого.
  • Подсказки должны быть спрятаны до того, как связанные с ними элементы удалены из DOM.

Вы всё поняли? Отлично, посмотрим, как это работает на конкретных примерах.

Пример: задействуйте подсказки везде

Один из способов инициализировать все подсказки на странице – обратиться к ним по абтрибуту data-toggle:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Примеры

Наведите курсор на ссылки – увидите подсказку:

Tight pants next level keffiyeh you probably haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney’s cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Наведите курсор на кнопки, чтобы увидеть четыре разные расположения подсказок: сверху, справа, внизу и влево.

<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

И с добавлением обычного HTML:

<button type="button" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Использование

Плагин подсказок создает содержимое и разметку по требованию, и по умолчанию размещает подсказки после их элемента-триггера.

Запустите подсказку через JavaScript:

$('#example').tooltip(options)

Разметка

Для использования подсказок требуется лишь атрибут data и title в том элементе HTML, который вы хотите оснастить подсказкой. Генерированная разметка подсказки – проще, хотя и требует установить позицию (по умолчанию позиция задается плагином как top).

Работа подсказок при использовании клавиатуры и юзеров вспомогательных технологий

Следует добавлять подсказки лишь в те элементы HTML, которые традиционно рассматриваются как пригодные для фокусировки с клавиатуры и интерактивные (такие как ссылки или органы управления форм). Хотя произвольные элементы HTML (такие как

<span>) можно оснастить той же возможностью – добавив атрибут tabindex="0" – это привнесет надоедливые баги при работе c не –интерактивными элементами с клавиатуры. Плюс – большинство вспомогательных технологий в настоящее время не объявляют и не видят содержимое подсказки в такой ситуации.

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

 
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div role="tooltip">
  <div></div>
  <div>
    Some tooltip text!
  </div>
</div>

Дезактивированные элементы

Элементы с атрибутом disabled не есть интерактивные, что означает, что подсказка (или поповер) не возникнут при фокусировании, наведении или клике на них юзеров. Как полумера в решении этого вопроса – можно запустить подсказки из оборачивающего элемента <div> или <span>, в идеале придав им возможность фокусировки с клавиатуры атрибутом

tabindex="0", и т. о. преодолев событие pointer-events в дезактивированном элементе.

<span tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button type="button" disabled>Кнопка отключения</button>
</span>

Параметры

Параметры можно передавать через атрибуты или JavaScript. С атрибутами: добавьте название атрибута к data-, как в data-animation="".

Название Тип Умолчание Описание
animation boolean true Применяет CSS-переход к подсказке
container string | element | false false

Добавляет подсказку к выбранному элементу. Пример: container: 'body'. Эта опция полезна в том, что в «потоке» документа позволяет позиционировать подсказку рядом с ее триггером — что предотвратит подсказку от «сползания» при изменении размера окна.
delay number | object 0

Откладывает показ и скрытие подсказки (мс) – не применяется к ручному типу триггера

Если цифра поддерживается, задержка применяется к обоим hide/show

Структура объекта: delay: { "show": 500, "hide": 100 }
html boolean false

Позволяет вставлять HTML в подсказку.

Если true, тэги HTML в title подсказки будут отрисованы в подсказке. Если false – метод jQuery text будет использован для вставки содержимого в DOM.

Используйте текст, если вы беспокоитесь о XSS-атаках.
placement string | function ‘top’

Как позиционируется всплывающая подсказка – авто – верх – низ – лево – право.
Когда задано auto, это автоматически переориентирует подсказку.

Когда функция используется для определения расположения, она вызывается с узлом всплывающей подсказки DOM как его первый аргумент и триггер-элемент узла DOM – как второй. Контекст this задается для экземпляра всплывающей подсказки.
selector string | false false Если селектор задан, объекты всплывающих подсказок будут «нацелены» на определенные «цели». На практике это используется для активации динамического содержимого HTML для возможности добавления поповеров. Смотри это и еще.
template string '<div role="tooltip"><div></div><div></div></div>'

Обычный HTML для использования при создании всплывающих подсказок.

title всплывающей подсказки будет введен в элемент класса .tooltip-inner

Элемент класса .arrow станет стрелочкой всплывающей подсказки.

Самый внешний оборачивающий элемент должен иметь класс .tooltip и role="tooltip".
title string | element | function »

Название по умолчанию, если атрибут title не задан.

Если функция задана, она будет вызываться с ее набором this, к которому прикреплена всплывающая подсказка.
trigger string ‘hover focus’

Задает, как вызывается подсказка — click | hover | focus | manual. Вы можете назначить много триггеров, разделите их пробелом.

'manual' означает, что подсказка будет запрограммированно запущена методами . tooltip('show'), .tooltip('hide') and .tooltip('toggle'), это значение нельзя сочетать с любым другим триггером.

'hover' сам по себе приведет к созданию подсказок, которые нельзя запустить с клавиатуры, и должны будут использоваться лишь, если другие методы для выдачи информации из подсказки для юзеров клавиатуры невозможны.
offset number | string 0 Отступ подсказки относительно ее «цели». Для большей информации иди в документацию отступов Popper.js.
fallbackPlacement string | array ‘flip’ Позволяет задать, какую позицию Popper.js будет использовать при «откате». Для информации — сюда.
boundary string | element ‘scrollParent’ Граница ограничения overflow подсказки. Принимает значения 'viewport', 'window', 'scrollParent' или отсылку к элементу HTML (только в JavaScript). Для информации – документация по preventOverflow docs.

Методы

Асинхронные методы и переходы

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

Смотрите документацию.

$().tooltip(options)

Прикрепляет обработчик подсказки к коллекции элементов.

.tooltip('show')

Показывает всплывающую подсказку элемента. Возвращается к функции-вызову до того, как модальный элемент показан (т.е. до того, как произойдет событие shown.bs.tooltip). Расценивается как «мануальный» запуск подсказки. Подсказки с названием нулевой длины никогда не отображаются.

$('#element').tooltip('show')
.tooltip('hide')

Скрывает подсказку элемента. Возвращается к функции-вызову до того, как модальный элемент скрыт (т.е. до того, как произойдет событие hidden.bs.tooltip). Это расценивается «мануальным» запуском подсказки.

$('#element').tooltip('hide')
.tooltip('toggle')

Изменяет состояние подсказки элемента. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт (т.е. до того, как события shown.bs.tooltip or hidden.bs.tooltip наступят). Расценивается как «мануальный» запуск подсказки.

$('#element').tooltip('toggle')
.tooltip('dispose')

Прячет и уничтожает подсказку элемента. Подсказки, которые используют «делегирование» (которые созданы использованием параметра «селектор»), нельзя уничтожить по отдельности на «подчиненных» элементах-триггерах.

$('#element').tooltip('dispose')
.tooltip('enable')

Дает возможность подсказке элемента быть показанной. Подсказки включены по умолчанию.

$('#element').tooltip('enable')
.tooltip('disable')

Лишает подсказку элемента возможности быть показанной. Подсказка будет доступна к показу только если она будет ре-активирована.

$('#element').tooltip('disable')
.tooltip('toggleEnabled')

Переключает возможность подсказки элемента быть показанной или скрытой.

$('#element').tooltip('toggleEnabled')
.tooltip('update')

Обновляет позицию подсказки элемента.

$('#element').tooltip('update')

События

Тип Описание
show.bs.tooltip Это событие наступает немедленно, когда экземпляр метода show вызван.
shown.bs.tooltip Это событие наступает, когда подсказка стала видимой юзеру (будет ждать завершения переходов CSS).
hide.bs.tooltip Это событие наступает немедленно, когда экземпляр метода hide вызван.
hidden.bs.tooltip Это событие наступает, когда подсказка только что прекратила быть скрытой от юзера (будет ждать завершения переходов CSS).
inserted.bs.tooltip Это событие наступает после события show.bs.tooltip, когда шаблон подсказки добавлен в DOM. 
$('#myTooltip'). on('hidden.bs.tooltip', function () {
  // do something…
})

Как создавать всплывающие подсказки

❮ Назад Далее ❯

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

Наведите курсор на текст ниже:

Верх Текст всплывающей подсказки

Справа Текст всплывающей подсказки

Внизу Текст всплывающей подсказки

Слева Текст всплывающей подсказки

Попробуйте сами »

Шаг 1) Добавьте HTML:

Пример

Наведите курсор на меня
  Подсказка текст

Шаг 2) Добавьте CSS:

Пример

/* Контейнер всплывающей подсказки */
.tooltip {
  position: родственник;
  отображение: встроенный блок;
  border-bottom: 1 пиксель с черными точками; /* Если вам нужны точки под наводимым text */
}

/* Текст всплывающей подсказки */
. tooltip .tooltiptext {
  видимость: скрыто;
  ширина: 120 пикселей;
  background-color: #555;
цвет: #fff;
выравнивание текста: по центру;
  отступ: 5 пикселей 0;
  Радиус границы: 6 пикселей;

/* Позиция текста всплывающей подсказки */
  position: absolute;
z-индекс: 1;
  внизу: 125 %;
  осталось: 50%;
  левое поле: -60 пикселей;

  /* Исчезновение всплывающей подсказки */
  opacity: 0;
  переход: непрозрачность 0,3 с;
}

/* Стрелка всплывающей подсказки */
.tooltip .tooltiptext::after {
  содержимое: «»;
  позиция: абсолютный;
  сверху: 100 %;
осталось: 50%;
  левое поле: -5 пикселей;
  ширина границы: 5 пикселей;
  стиль границы: сплошной;
  border-color: #555 прозрачный прозрачный прозрачный;
}

/* Показать текст всплывающей подсказки, когда вы наводите указатель мыши на контейнер всплывающей подсказки */
. tooltip:hover .tooltiptext {
видимость: видимая;
  непрозрачность: 1;
}

Попробуйте сами »

Совет: Перейдите к нашему руководству по подсказкам CSS, чтобы узнать больше о подсказки.

Совет: Чтобы создать интерактивные всплывающие подсказки, перейдите к нашему руководству по созданию всплывающих окон

Совет: Модальные окна также похожи на всплывающие подсказки. Перейдите к нашему учебному пособию по созданию модальных окон, чтобы узнать о модальные.

❮ Предыдущий Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

2 Лучшие примеры Примеры HTML
Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

Всплывающие подсказки с богатым содержимым HTML – документация amCharts 4

Всплывающие подсказки в amCharts 4 могут отображать форматированную информацию благодаря форматированию стилей и синтаксису привязки данных, обеспечиваемому встроенным средством форматирования текста. Однако иногда мы можем пойти еще дальше: использовать бесконечные возможности форматирования, предоставляемые HTML и CSS. Этот урок объяснит, как это сделать.

Базовая схема

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

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

 series3.tooltipText = `[bold]YEAR {categoryX}[/]
----
Автомобили: {автомобили}
Мотоциклы: {мотоциклы}
Велосипеды: {велосипеды}`;
series3. tooltip.pointerOrientation = "вертикальный";
 
 series3.tooltipText = `[полужирный]ГОД {categoryX}[/]
----
Автомобили: {автомобили}
Мотоциклы: {мотоциклы}
Велосипеды: {велосипеды}`;
series3.tooltip.pointerOrientation = "вертикальный";
 
 {
  // ...
  "серии": [{
    // ...
  }, {
    // ...
  }, {
    // ...
    "tooltipText": `[жирный]ГОД {categoryX}[/]
----
Автомобили: {автомобили}
Мотоциклы: {мотоциклы}
Велосипеды: {велосипеды}`,
    "подсказка": {
      "pointerOrientation": "вертикальный"
    }
  }]
}

И конечный результат:

См. Pen amCharts V4: всплывающая подсказка на основе HTML (справочная диаграмма) от amCharts (@amcharts) на CodePen.24419

Мы получаем хорошую сводную подсказку, когда наводим курсор на нашу диаграмму:

ПРИМЕЧАНИЕ Обратите внимание, как мы установили pointerOrientation  на "vertical" . Это поместит нашу всплывающую подсказку прямо над точкой данных, а не сбоку от нее. Это будет важно в последующих разделах этого руководства.

Создание всплывающей подсказки для всех рядов

До сих пор мы добавляли tooltipHTML (или tooltipText ) к одному ряду, так что независимо от того, где находится ваш курсор, всплывающая подсказка всегда прикрепляется к элементу данных в этом серии.

Это создает проблему, когда эта конкретная серия скрыта, например. через Легенду.

В попытке исправить это мы можем попробовать добавить tooltipHTML (или tooltipText ) в каждую серию. Однако это создало бы еще одну проблему — вместо одной всплывающей подсказки у нас было бы несколько. Нехорошо.

К счастью, у нас есть настройка курсора, которая нам поможет — maxTooltipDistance .

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

При установке значения -1 всегда будет отображаться только одна всплывающая подсказка.

 chart.cursor.maxTooltipDistance = -1; 
 chart.cursor.maxTooltipDistance = -1; 
 {
  // ...
  "курсор": {
    // ...
    "maxTooltipDistance": -1
  }
}

См. Pen amCharts V4: всплывающая подсказка на основе HTML (справочная диаграмма) команды amCharts (@amcharts) на CodePen.24419

Настройка содержимого HTML

К приведенному выше тексту SVG было применено некоторое форматирование. Но мы хотим пойти дальше и использовать всю мощь HTML/CSS для форматирования нашего материала во всплывающей подсказке.

К счастью для нас, это возможно.

Если мы установим tooltipHTML  вместо tooltipText , наша всплывающая подсказка будет автоматически отображать этот контент в формате HTML.

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

 series3.tooltipHTML = `
YEAR {categoryX}

<ч />
<таблица>

  Автомобили
  {автомобили


  Мотоциклы
  {мотоциклы


  Велосипеды
  {велосипеды


<ч />`; 
 series3.tooltipHTML = `
ГОД {categoryX}

<ч />
<таблица>

  Автомобили
  {автомобили


  Мотоциклы
  {мотоциклы


  Велосипеды
  {велосипеды


<ч />`; 
 {
  // ...
  "серии": [{
    // ...
  }, {
    // ...
  }, {
    // ...
    "tooltipHTML": `
ГОД {categoryX}

<ч />
<таблица>

  Автомобили
  {автомобили


  Мотоциклы
  {мотоциклы


  Велосипеды
  {велосипеды


<ч />`,
    "подсказка": {
      "pointerOrientation": "вертикальный"
    }
  }]
}

См. всплывающую подсказку Pen amCharts V4: на основе HTML от amCharts (@amcharts) на CodePen.24419

Поздравляем! Теперь у нас есть всплывающая подсказка с полноценным HTML:

ПРИМЕЧАНИЕ. Помните, в начале этой статьи мы упоминали, что ориентация указателя важна? Это было из-за этого взаимодействия. Выноска отображается для элемента данных, находящегося под курсором. Если бы всплывающая подсказка отображалась сбоку, мы попытались бы навести на нее кнопку, чтобы перейти к следующему элементу данных, что привело бы к перемещению всплывающей подсказки и отображению нового элемента данных. Это фактически сделало бы нашу всплывающую подсказку ненаводимой.

Добавление интерактивных элементов

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

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

Ну, почти.

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

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

 series3.tooltip.label.interactionsEnabled = true; 
 series3.tooltip.label.interactionsEnabled = true; 
 {
  // ...
  "серии": [{
    // ...
  }, {
    // ...
  }, {
    // ...
    "подсказка": {
      "этикетка": {
        «интерактионсенаблед»: правда
      }
    }
  }]
}

Теперь кнопка в нашем HTML будет работать.

И, что еще более круто, события onclick , добавленные к кнопке, также сработают!

Попробуйте на живом примере ниже:

См.

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

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