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


Содержание

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

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

Согласно w3.org

  1. текст атрибута alt отображается, когда не может быть показан объект,
  2. текст атрибута title отображается во всплывающей подсказке, когда курсор мышки наведён на элемент.
содержимое
Пример: title=»про атрибут title: содержимое в большинстве случаев не индексируется поисковыми системами»> наведи на меня
Результат: наведи на меня
Пример: наведи на меня
Результат: наведи на меня

Появляющаяся подсказка (сообщение) в JavaScript

Пример: нажми на меня
Результат: нажми на меня

Своя всплывающая подсказка к тексту

Что будет работать на CSS

Желательное поведение подсказки:

  1. появляться с небольшой задержкой, чтобы не мешать незаинтересованным в подсказке посетителям,
  2. появляться по центру (слева/справа) наводимого элемента,
  3. адаптироваться к ширине и высоте окна браузера,
  4. иметь HTML-содержимое (изображение, ссылка), а не только текст,
  5. подстраиваться под содержимое (или не более содержимого, или не более указанной величины, или не более окна браузера),
  6. работать на сенсорных экранах (появляться и при наведении, и при нажатии),
  7. индексироваться поисковыми системами.

Примеры: наведи на меня (по центру) В статье «Как заработать деньги в интернете» можно увидеть практическое использование , наведи на меня (влево) Важно: tabindex в теге нужен чтобы срабатывал :focus , наведи на меня (вправо) Ничто так не воодушевляет, как сознание своего безнадёжного положения Альбер Камю

Пример с анимацией: наведи на меня Короткая

Что нельзя сделать без JavaScript

Желательное поведение:

  1. находится в видимой области окна браузера.

Пример: наведи на меня Даже когда ширина подсказки меньше окна браузера, она может уходить за край видимой области, так как подсказка располагается относительно элемента, а не относительно HTML-документа

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

21 комментарий:

Павел Каким образом относится высказывание:»Это правило не относится к IE, поэтому лучше указать оба атрибута.» к IE? Означенные атрибуты собственно нужны не столько пользователям и браузерам, а поисковикам. Так как первым(тем кто ищет информацию отключив мультимедию) до лампочки изображения(а ссылка, как правило анонсируется), из вторых как раз таки правильно отображает указанные атрибуты IE. Вот у гугловского хрома проблема с alt. NMitra Спасибо за то, что обратили внимание на этот момент. Строку убрала, дабы не вводить в заблуждение читателей. Я имела ввиду то, что версии ниже IE 8 отображают подсказку при наведении мышки на изображение, если в теге img указан alt (без title). Серебро Оригинальное оформление. Только свойства CSS у вас прописаны для блоков podskazka, а сама конструкция подсказки привязана к блоку priskazka, что может привести к ошибкам в оформлении у читателей, взявших ваш пример на вооружение. NMitra Совершено верно. Благодарю за замечание. Бегу исправлять PANIC Я хочу, чтобы при наведении на ссылку в гаджете «страницы» (или «список ссылок») появлялась всплывающая подсказка (как у Вас вверху).
Но куда и что вставлять. не могу понять NMitra Нужно прописывать тегу a атрибут title. Это возможно либо в гаджете HTML/JavaScript, либо если размещать ссылки прямо в шаблоне. Maniak помогите привязать к картинке а картинку сделать к левому краю экрана — хочу сделать всплывающие контакты сейчас работает только после нажатия NMitra Похоже вы справились без моей помощи. К сожалению, ранее не было возможности ответить — находилась вне связи. Мишаня Скажите, пожалуйста, а можно установить какой-нибудь код, чтобы на всех размещённыхв блоге фотографиях оторбажались её свойства (размер и габариты). NMitra Правая кнопка мышки — «Информация об изображении» даст всю необходимую информацию. Можно прописать title элементу, где указать размеры. Как автоматизировать этот процесс, я точно не скажу.

Hello-site.ru

Tooltip (тултип) — всплывающая подсказка на html + javascript\jQuery

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

На самом деле реализация тултипов(tooltip) очень проста и не требует вмешательства каких-либо внешних плагинов, все намного проще. Элемент, к которому нужно выводить tooltip, необходимо отметить селектором и атрибутом, в котором будет находиться текст подсказки или даже html. При наведении на элемент текст подсказки будет размещен в блоке тултипа. Сам блок с помощью javascript/jQuery размещаем вблизи с исходным элементом. Остается только стилизовать tooltip.

Размещаем html со следующим содержанием:

Стилизуем элементы и всплывающий тултип:

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

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

Всплывающие подсказки на HTML и CSS3

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

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

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

Я представляю вам очень удобный и функциональный пример, который реализован только на чистом HTML и CSS3, что несомненно является большим плюсом и гарантирует беспроблемную установку на проект любой сложности. К тому же, в нём используются современные SVG-иконки, о которых я уже писал в статье про Dashicons в WordPress.

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

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

Как я уже говорил — установка не составит труда, так как никаких «танцев с бубном» здесь не будет.
ПРИМЕР СКАЧАТЬ

Давайте рассмотрим все тонкости установки всплывающих подсказок на примере «Растянутая». Для начала разберемся с HTML-документом, а именно с блоком :

Всплывающие подсказки, построенные только на CSS

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

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

В то время, как существует много инновационных решений с использованием CSS и JavaScript (с или без использования фреймворка JavaScript, например, jQuery), иногда полезно взглянуть на то, как новые технологии встряхивают давно используемые методы.

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

Всплывающие подсказки — это круто!

Где бы не нужно было объяснить аббревиацию или акроним, объяснить значение слова или дать дополнительную информацию о чём-либо, всплывающие подсказки будут простым, но эффективным решением.

Начиная с маленького жёлтого блока с текстом, который появляется над элементом, таким как изображение, и выводит содержание атрибута title (или атрибута alt , если вы к несчастью используете Internet Explorer) до основанных на скриптах изощрённых решений с использованием, всплывающие подсказки являются фантастическим инструментом, который, кажется, мало популярен в сообществе дизайнеров.

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

Усиление эффекта воздействия всплывающих подсказок

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

Если вы уже использовали решения на основе jQuery, то, конечно же, обратите внимание на то, что JavaScript может многое из того, что недоступно CSS(например, задержка перед исчезновением выплывающей подсказки). Но выделение и оформление может быть выполнено с помощью CSS, что способствует улучшению дизайна и вдохновляет на создание других прекрасных решений, которые выходит за рамки всплывающих подсказок.

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

Что мы собираемся сделать

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

Это означает, что они будут работать в браузерах, которые не поддерживают CSS3 (таких, как Internet Explorer 8 и старше) — они будут выглядеть в них не так хорошо, как в новых браузерах.

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

Расширения CSS3

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

Что у нас под капотом?

Начнём с кода HTML для нашего примера.

различные типы всплывающих подсказок

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

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

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

Кросс-браузерная совместимость

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

Основная разметка

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

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

Содержимое всплывающих подсказок удаляется из поля зрения с помощью негативного значения свойства margin-left , а не display: none или visibility: hidden , так как некоторые программы для чтения с экрана игнорируют указанные свойства.

Стили CSS придают странице тот вид, который нужен.

Стили CSS для всплывающих подсказок

На данном этапе ссылки не имеют установок для вывода всплывающих подсказок при наведении курсора мыши.

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


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

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

Необходимость строки * html

У вас может возникнуть вопрос, для чего включена последняя строка в выше приведённом коде? Она устанавливает прозрачность для фона сслыки. Во время тестирования всплывающих подсказок выявился странный эффект в IE6, который не поддавался удалению до тех пор, пока существовал фон ссылки!

Всплывающие подсказки начали работать, а оформление добавим позже!

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

Задаём цветовую схему для всплывающих подсказок/

Ниже приведённый код задаёт для каждого из пяти стилей всплывающих подсказок цветовую схему.

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

Код CSS для цветовой схемы

Код CSS очень прост, но он придаёт отличный вид всплывающим подсказкам и выполняет свою функцию везде. Цветовую схему можно поменять по своему усмотрению.

Несколько штрихов CSS3 для продвинутого отображения всплывающих подсказок

Перед тем, как закончить урок, вставим несколько строк кода CSS3 для придания ввизуальных эффектов нашим всплывающим подсказкам. Установим скруглённые углы с помощью свойства border-radius и придадим объёмности с помощью свойства box-shadow .

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

Стили придают всплывающим подсказкам замечательный вид и уникальность!

Добавим ниже приведённый код в селектор .tooltip:hover span и обновим страницу.

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

Вы можете заметить, что используются не только официальные свойства CSS3, но и расширения для Mozilla и WebKit.

Дополнительные свойства CSS для новых браузеров

Используем свойства CSS3.

Резюме

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: sixrevisions.com/css/css-only-tooltips/
Перевел: Сергей Фастунов
Урок создан: 2 Августа 2010
Просмотров: 166535
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

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

Всплывающей подсказкой называется блок с текстом, который появляется при наведении на элемент веб-страницы (рис. 1). Цель такой подсказки — дать более подробную информацию о содержимом элемента. К примеру, для ссылок подсказкой может служить адрес ссылки или краткое описание сайта, на который ведёт ссылка.

Рис. 1. Вид всплывающей подсказки

Для создания подсказки в HTML добавим к нужному элементу пользовательский атрибут data-tooltip с текстом подсказки.

Вывод текста и его оформление дальше возлагается на CSS. Само отображение содержимого атрибута происходит через свойство content. Добавляем его к псевдоэлементу ::after, который привязываем к селектору [data-tooltip] — это позволяет создавать подсказку для любого элемента.

Цвет фона, текста, размеры и положение подсказки также задаются в ::after . Заодно скрываем подсказку, делая её прозрачной через свойство opacity.

Там же устанавливаем и время перехода с помощью свойства transition.

Псевдоэлемент ::after является частью своего родителя, так что :hover начинает срабатывать при наведении не на саму строку, а на невидимую подсказку. Предотвратить взаимодействие курсора мыши с подсказкой можно с помощью свойства pointer-events со значением none .

Чтобы подсказка отображалась, плавно становясь непрозрачной, добавим к :hover свойство opacity со значением 1.

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

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

Приветствую вас на сайте Impuls-Web!

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

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

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

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

Или вот еще один пример с использованием картинки:

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

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

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

Вот что получится:

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

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

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

Желаю вам удачи! До встречи в следующих статьях!

Несложная всплывающая подсказка на CSS

Всем привет! Сегодня мы рассмотри еще один интеренсый пример всплывающей подсказки. Основным плюсом будет: не сложная реалиация кода и коментарий в css файле для быстрого разбора и редактирования.

Смотреть примерСкачать

Текстовая всплывающая подсказка:

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

Всплывающая подсказка с картинкой:

Похожие статьи на эту тему:

А сейчас опишу процесс установки всплывающей подсказки по шагам.

Всплывающие подсказки — html, JS, Bootstrap

Всплывающая подсказка представляет собой короткое текстовое сообщение с пояснением, возникающие в результате наведения курсора мышки на элемент страницы. Далее рассмотрим как сделать всплывающую подсказку в html.

Стандартный способ


За показ подсказки отвечает . Этот атрибут можно использовать для показа подсказки к разным объектам, но чаще всего его используют в качестве поясняющего текста к изображениям.</p> <p>Для показа всплывающей подсказки нужно только лишь добавить это атрибут и написать в нем необходимый поясняющий текст.</p> <p>В качестве подсказки может использоваться как одно слово или словосочетание, так и сразу несколько предложений. Обычно всплывающая html подсказка выглядит следующим образом:</p> <p>Поясняющий текст появляется не сразу после наведения мышки на изображение, а через пару секунд. Такая особенность всплывающих подсказок заложена по умолчанию.</p> <p>Стандартная всплывающая html подсказка при наведении на текст имеет один существенный недостаток – отсутствие инструментов для стилизации. Чтобы решить эту проблему необходимо использовать другие способы создания всплывающей подсказки.</p> <h2 id="sposob-na-chistom-css">Способ на чистом css</h2> <p>Для красивого вывода подсказки обычно используется именно этот способ. Он предусматривает заключение картинки в контейнер с идентификатором. Благодаря этому, обеспечивается возможность обращения к данному контейнеру в стилях:</p> <p>В вышеуказанном примере единственным непонятным моментом может быть . Этот атрибут не выполняет никакой функции. Однако его значение используется в js и css. Таким образом, и этот атрибут может быть полезен. Но сначала необходимо описать стили блок-контейнера.</p> <p>Относительное позиционирование используется по причине того, что контейнер со всплывающей подсказкой будет позиционироваться абсолютно. Поэтому необходимо сделать так, чтобы текст позиционировался только относительно родительского блока, а не всей страницы.</p> <p>Блочно-строчное отображение не помешает родительскому блоку (в том числе и контейнеру с со всплывающей подсказкой) растянуться на всю ширину окна. Теперь осталось создать поясняющий текст.</p> <p>Всплывающие подсказки в css проще всего делать посредством псевдоэлементов:</p> <p>Несмотря на обилие кода, он очень прост для понимания. Селектор #pdskzk:hover:after необходим для создания псевдоэлемента after в тот момент, когда пользователь ставит курсор на контейнер с изображением. Свойство content: attr(data-name) предназначено для указания текстового значения. Оно соответствует свойству, которое записано в атрибуте data-name у контейнера-обертки изображения.</p> <p>После этого остается позиционировать объект абсолютно и задать ему необходимые параметры:</p> <p>Таким образом, получается такая всплывающая подсказка css при наведении на картинку:</p> <p>По сравнению со стандартной подсказкой, этот вариант поясняющего текста при наведении на изображение выглядит более интересно и привлекательно. К тому же подсказка возникает сразу при наведении курсора на элемент. При этом плавное появление всплывающей подсказки невозможно из-за то, что псевдоэлементы не поддерживают такой функционал.</p> <h2 id="plavnoe-poyavlenie">Плавное появление</h2> <p>Тем не менее, возможности css позволяют использовать плавное появление подсказки. В этом случае не используются псевдоэлементы. Это обусловлено тем, что именно они не позволяют применить опцию плавного появления. Пример реализации плавного появления всплывающей подсказки на css представлен ниже:</p> <p>Стоит заметить, что css-код практически не изменился:</p> <p>Ключевое изменение касается свойства content, которое не используется в этом примере. Оно потеряло актуальность ввиду того, что поддерживается только псевдоэлементами. Еще одно изменение – появление свойства transition. Именно это свойство отвечает за создание плавных переходов. Внимательный читатель наверняка обратил внимание на значение opacity: 0. Оно делает контейнер с подсказкой прозрачным.</p> <p>Теперь при наведении на родительский блок достаточно вернуть стандартную прозрачность контейнеру с подсказкой. После этого можно проверить работу кода и убедиться в том, что поясняющий текст возникает на экране плавно.</p> <p>CSS3 позволяет скрыть элемент и другими способами. Например, может использоваться трансформация. Этот метод предусматривает замену полной прозрачности на свойство transform: scale(0). Также необходимо уменьшить размер контейнера до 0. Таким образом, его не будет видно на странице. При наведении на контейнер с изображением нужно указать свойство transform: scale(1). Этот способ позволяет сделать появление всплывающего текстового сообщения не только плавным, но и эффектным.</p> <h2 id="drugie-sposoby">Другие способы</h2> <p>Всплывающие текстовые сообщения можно создавать и посредством jQuery. Эта библиотека может использоваться как для написания своего кода, так и для создания плагина для всплывающих подсказок на jQuery, который реализует необходимый эффект.</p> <p>Альтернативный вариант – всплывающие подсказки на Bootstrap. Этот фреймворк имеет множество готовых реализаций всплывающих подсказок. Достаточно только ознакомиться с документацией к Bootstrap и изучить доступные примеры кода. При этом совершенно необязательно полностью подключать этот фреймворк. Достаточно скачать и подключить компонент toolptips.</p> <p>В целом сегодня существует огромное количество способов создания всплывающих подсказок без js. Благодаря такому разнообразию, можно использовать как стандартные реализации, так и более эффектные с плавным или резким появлением. Кроме того, не стоит забывать о возможностях библиотеки jQuery и фреймворка Bootstrap.</p> <h2 id="bootstrap-tooltips-vsplyvayuschie-podskazki">Bootstrap – Tooltips (всплывающие подсказки)</h2> <p><em>В этой статье познакомимся с процессом создания подсказок посредством Bootstrap 3 и 4. Эти подсказки можно добавлять к любым HTML-элементам (изображениям, текстовым элементам, ссылкам и др.).</em></p> <h2 id="chto-takoe-vsplyvayuschaya-podskazka-tooltip">Что такое всплывающая подсказка (tooltip)?</h2> <p>Всплывающая подсказка – это некоторая информация, появляющаяся рядом с элементом обычно при поднесении к нему курсора. Подсказки могут быть добавлены к любым элементам.</p> <p>Компонент Tooltip в Bootstrap 3 и 4 построен с помощью CSS и JavaScript.</p> <p>Компонент Tooltips в Bootstrap 4 для позиционирования подсказок использует стороннюю библиотеку Popper.js . Это означает что файл этой библиотеки ( popper.js ) необходимо подключить перед bootstrap.js . Кроме этого варианта, можно ещё воспользоваться файлом bootstrap.bundle.min.js или bootstrap.bundle.js . Данный файл включает в себя bootstrap.js и popper.js .</p> <p>При самостоятельной сборке JavaScript из исходных кодов Bootstrap 4, для работы компонента Tooltips необходимо кроме файла tooltips.js в проект ещё включить utils.js .</p> <h2 id="tonkosti-ispolzovaniya-komponenta-tooltips">Тонкости использования компонента Tooltips</h2> <p>Подсказки Tooltips по соображениям производительности автоматически не инициализируются . Это действие необходимо выполнить дополнительно, например, после загрузки страницы.</p> <p>Всплывающие подсказки с нулевой длиной текста никогда не отображаются.</p> <p>Укажите container: ‘body’ чтобы избежать проблем рендеринга этого компонента в более сложных компонентах (группы input, группы кнопок и др.). В Bootstrap 4 данное значение для параметра container установлено по умолчанию.</p> <p>Отображение всплывающих подсказок на скрытых элементах не работает.</p> <p>Всплывающая подсказка для не активного элемента (т.е. имеющего класс disabled или атрибут disabled ) должна вызываться на его родителе.</p> <p>При вызове на гиперссылках, которые состоят из нескольких строк, всплывающие подсказки будут центрироваться. Используйте white-space: nowrap , на элементе a , чтобы отключить такое поведение.</p> <p>Всплывающие подсказки должны быть скрыты перед удалением соответствующих элементов из DOM.</p> <h2 id="dobavlenie-podskazki-k-elementu">Добавление подсказки к элементу</h2> <p>Создание всплывающей подсказки осуществляется посредством добавления к HTML-элементу атрибута title и вызова для него метода tooltip .</p> <p>По умолчанию всплывающая подсказка располагается сверху от элемента.</p> <p>Чтобы было более просто выбрать все элементы на странице, для которых необходимо вызвать метод tooltip , к ним, например, можно добавить атрибут data-toggle=»tooltip» .</p> <h2 id="podskazka-dlya-elementa-imeyuschego-sostoyanie">Подсказка для элемента, имеющего состояние disabled</h2> <p>Элементы с атрибутом disabled являются не интерактивными, т.е. они не могут находиться в состоянии focus, hover или click. Поэтому для того, чтобы добавить подсказку к такому элементу, его необходимо обернуть, например, с помощью div или span, и вызвать уже подсказку посредством этого элемента.</p> <h2 id="nastroyka-vsplyvayuschih-podskazok">Настройка всплывающих подсказок</h2> <p>В следующей таблице приведены параметры, с помощью которых Вы можете настроить функциональность и поведение всплывающих подсказок. Настройка может осуществляться как с помощью атрибутов data- , так и посредством JavaScript:</p> <table > <thead> <tr> <th style="width: 100px; border: 1px solid #dee2e6;">Имя</th> <th style="border: 1px solid #dee2e6;">Описание</th> </tr> </th> <tbody> <tr> <td>animation</td> <td>Тип: boolean . Значение по умолчанию: true . Определяет необходимо ли появление и скрытие всплывающей подсказки выполнять с анимацией.</td> </tr> <tr> <td>container</td> <td>Тип: string | element | false . Значение по умолчанию: false . Определяет элемент в который необходимо помещать код всплывающей подсказки.<br />Например, если указать этому параметру значение «body» , то код подсказки будет добавляться в конец элемента body . А если например, значение «#tooltip» , то в элемент, имеющий id , равный tooltip .<br />По умолчанию, Bootstrap 3 HTML-код tooltip помещает после элемента, который вызвал эту подсказку, а Bootstrap 4 — в конец элемента body .</td> </tr> <tr> <td>delay</td> <td>Тип : number | object . Значение по умолчанию : 0 . <br />Устанавливает время задержки перед отображением и скрытием всплывающей подсказки в миллисекундах. Не применяется к параметру trigger со значением manual . При указании одного значения (числа), интервал задержки устанавливается одинаковым как перед отображением, так и перед скрытием. Для установки разного времени, значение параметра указывается в формате объекта. Например, delay: < show: 500, hide: 100 >. В этом случае пауза перед отображением будет 500 мс, а перед скрытием – 100 мс.</td> </tr> <tr> <td>html</td> <td>Тип: boolean . Значение по умолчанию: false . Определяет можно ли в содержимом подсказки (tooltip) использовать HTML теги. Значение true данного параметра соответственно включает эту возможность, а false — отключает.</td> </tr> <tr> <td>placement</td> <td>Тип: string | function . Значение по умолчанию: «top» . Этот параметр позволяет настроить расположение всплывающей подсказки относительно элемента. Для установки доступны следующие значения: «auto» , «top» , «bottom» , «left» , «right» . Значение auto предназначено для автоматического ориентирования подсказки.<br />Кроме вышеприведённых значений для определения положения подсказки можно использовать функцию . Она получает 2 аргумента. В качестве первого аргумента — DOM-узел всплывающей подсказки, а в качестве второго — DOM-элемент, вызвавший её. В контексте функции ключевое слово this указывает на экземпляр tooltip .</td> </tr> <tr> <td>selector</td> <td>Тип: string | false . Значение по умолчанию: false .<br />Этот параметр предназначен для инициализации подсказок у элементов, которые будут создаваться динамически после загрузки страницы.<br />В качестве объекта, для которого необходимо вызвать данный метод ( tooltip ) нужно выбрать элемент, который всегда будет присутствовать на странице. В большинстве случаев, в качестве такого элемента выбирают document или body .<br />В качестве значения этого параметра необходимо указать селектор , на основе которого будет осуществляться фильтрация потомков, для которых необходимо инициализировать подсказку.</td> </tr> <tr> <td>template</td> <td>Тип: string . <br />Значение по умолчанию: Этот параметр устанавливает HTML-код, который будет использоваться при создании всплывающей подсказки. Текст всплывающей подсказки будет вставлен в элемент с классом tooltip-inner . Элемент с классом arrow используется для создания треугольника у всплывающей подсказки. Обёрточный элемент подсказки должен иметь класс tooltip и атрибут role=»tooltip» .</td> </tr> <tr> <td>title</td> <td>Тип : string | element | function . Значение по умолчанию : «». <br />Устанавливает значение подсказки по умолчанию , если атрибут title не указан. Если в качестве значения указана функция, то она будет вызвана со ссылкой на элемент, к которому прикреплена эта подсказка.</td> </tr> <tr> <td>trigger</td> <td>Тип : string . Значение по умолчанию : «hover focus» . <br />Данный параметр определяет события , при которых подсказка будет запускаться. Для установки доступно 4 события: «click» (при клике), «hover» (при наведении), «focus» (при нахождении элемента в фокусе) и «manual» ( самостоятельное определение). Кроме этого возможно комбинирование событий. В этом случае они указываются через пробел. <br />Значение «manual» указывает, что всплывающая подсказка будет запускаться программно с помощью методов tooltip (‘show’) , tooltip (‘hide’) и tooltip (‘toggle’) . Это значение нельзя комбинировать с другими.</td> </tr> <tr> <td>viewport</td> <td>Имеется только в Bootstrap 3. <br />Тип : string | object | function . Значение по умолчанию : < selector: 'body', padding: 0 >.<br />Устанавливает границы в пределах которых должна отображаться всплывающая подсказка. Примеры значений: viewport: ‘#viewport’ или < "selector": "#viewport", "padding": 0 >.<br />Если в качестве значения указана функция, то она вызывается с единственным аргументом, значение которого равно DOM-узлу, который вызвал всплывающую подсказку. В контексте функции ключевое слово this указывает на экземпляр tooltip.</td> </tr> <tr> <td>offset</td> <td>Имеется только в Bootstrap 4. <br />Тип : number | string . Значение по умолчанию : 0 .<br />Этот параметр позволяет настроить смещение всплывающей подсказки относительно её цели. В качестве значения можно указать одно значение (Number или String) или несколько значений в виде String, разделенных запятой.</td> </tr> <tr> <td>fallbackPlacement</td> <td>Имеется только в Bootstrap 4. <br />Тип : string | array . Значение по умолчанию : ‘flip’ .<br />Этот параметр определяет, как необходимо изменить положение всплывающей подсказки, когда она начинает перекрывать свой ссылочный элемент. Это может flip (флип), clockwise (по часовой стрелки), counterclockwise (против часовой стрелки) или массив, содержащий список допустимых мест размещения.</td> </tr> <tr> <td>boundary</td> <td>Имеется только в Bootstrap 4. <br />Тип : string | element . Значение по умолчанию : ‘scrollParent’ .<br />Свойство boundary определяет как должно вести содержимое подсказки, если оно выходит за допустимые границы. В качестве значения можно использовать ‘viewport’, ‘window’, ‘scrollParent’, или ссылку на HTML-элемент (только JavaScript).</td> </tr> </tbody> </table> <p>Настройка всплывающих подсказок с помощью JavaScript осуществляется следующим образом:</p> <p>Пример настройки расположения всплывающих подсказок, как с помощью data-атрибута, так и посредством JavaScript:</p> <p>Пример, в котором установка расположения подсказки осуществляется с помощью функции:</p> <p>Ссылка, при нажатии на которую отображается всплывающая подсказка, которая в свою очередь тоже содержит ссылки (в примере используются параметры title, placement, trigger, html):</p> <p>Всплывающая подсказка, содержащая изображение (в примере используются параметры title, html):</p> <p>Изменения шаблона всплывающей подсказки осуществляется с помощью параметра template:</p> <p>Инициализация всплывающей подсказки для динамических элементов, т.е. добавляемых на страницу уже после загрузки страницы (в примере используется параметр selector):</p> <h2 id="metody-plagina-tooltips">Методы плагина Tooltips</h2> <p>Методы плагина Tooltips приведены в таблице.</p> <table > <thead> <tr> <th style="width: 200px; border: 1px solid #dee2e6;">Имя</th> <th style="border: 1px solid #dee2e6;">Описание</th> </tr> </th> <tbody> <tr> <td>.tooltip(options)</td> <td>Этот метод инициализирует для одного или множества выбранных элементов всплывающие подсказки с указанными параметрами.</td> </tr> <tr> <td>.tooltip(‘show’)</td> <td>Метод, который включает отображение всплывающей подсказки у элемента.</td> </tr> <tr> <td>.tooltip(‘hide’)</td> <td>Метод, который убирает отображение всплывающей подсказки у элемента.</td> </tr> <tr> <td>.tooltip(‘toggle’)</td> <td>Этот метод переключает отображение подсказки у элемента. Т.е. если подсказка отображается у элемента, то убирает её. А если она не отображается, то включает её.</td> </tr> <tr> <td>.tooltip(‘destroy’)</td> <td>Имеется только в Bootstrap 3. Этот метод убирает всплывающую подсказку у элемента и удаляет её.</td> </tr> <tr> <td>.tooltip(‘enable’)</td> <td>Имеется только в Bootstrap 4. Этот метод включает возможность показа всплывающий подсказки у элемента. Всплывающие подсказки включены по умолчанию.</td> </tr> <tr> <td>.tooltip(‘disable’)</td> <td>Имеется только в Bootstrap 4. Этот метод отключает возможность показа всплывающий подсказки у элемента. Для того чтобы снова включить возможность показа всплывающей подсказки у элемента, для него необходимо вызвать метод tooltip с параметром ‘enable’ или ‘toggleEnabled’.</td> </tr> <tr> <td>.tooltip(‘toggleEnabled’)</td> <td>Имеется только в Bootstrap 4. Метод переключает возможность показа всплывающий подсказки у элемента.</td> </tr> <tr> <td>.tooltip(‘update’)</td> <td>Имеется только в Bootstrap 4. Обновляет положение всплывающей подсказки у элемента.</td> </tr> <tr> <td>.tooltip(‘dispose’)</td> <td>Имеется только в Bootstrap 4. Этот метод убирает всплывающую подсказку у элемента и удаляет её.</td> </tr> </tbody> </table> <p>Пример использование методов для управления всплывающими подсказками (Bootstrap 3):</p> <p>Пример использование методов для управления всплывающими подсказками (Bootstrap 4):</p> <h2 id="sobytiya-plagina-tooltips">События плагина Tooltips</h2> <p>JS Tooltips генерирует для всплывающих подсказок пять событий.</p> <table > <thead> <tr> <th style="width: 100px; border: 1px solid #dee2e6;">Имя</th> <th style="border: 1px solid #dee2e6;">Описание</th> </tr> </th> <tbody> <tr> <td>show.bs.tooltip</td> <td>Событие возникает после вызова метода show() .</td> </tr> <tr> <td>shown.bs.tooltip</td> <td>Это событие генерируется, когда подсказка становится полностью видимой пользователю (после завершения CSS переходов).</td> </tr> <tr> <td>hide.bs.tooltip</td> <td>Событие возникает после вызова метода hide() .</td> </tr> <tr> <td>hidden.bs.tooltip</td> <td>Это событие генерируется, когда подсказка становится полностью скрытой от пользователя (после завершения CSS переходов).</td> </tr> <tr> <td>inserted.bs.tooltip</td> <td>Это событие вызывается после события show.bs.tooltip, когда шаблон подсказки будет добавлен в DOM.</td> </tr> </tbody> </table> <p>Пример работы с событиями (при возникновении события выведем имя события, и время когда оно произошло):</p> <h2 id="kak-izmenit-tsvet-i-shirinu-podskazki-s-pomoschyu">Как изменить цвет и ширину подсказки с помощью CSS</h2> <p>Изменить некоторые параметры подсказки можно посредством переопределения её CSS-свойств.</p> <p>Например, изменим цвет подсказки и её максимальную ширину (Bootstrap 4):</p> <h2 id="besplatnaya-podborka-vsplyvayuschih-podskazok">Бесплатная подборка всплывающих подсказок с использованием JQuery и CSS3</h2> <p>Здравствуйте, дорогие читатели блога beloweb.ru. В этот замечательный вечер я спешу представить Вам, замечательную подборку бесплатных плавно всплывающих подсказок на любой вкус и цвет с использованием CSS3 и JQuery.</p> <p>Ну что тут сказать, подборка получилась довольно таки не плохая. И я думаю, что она существенно поможет решить Вам проблему с подсказками на сайте. Тем более здесь есть с чего выбрать. Ну а теперь наслаждайтесь, друзья.</p><div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://studiowb.ru/obrabotka-blokov-dannyh/" target="_blank" class="u86c9e99ce239a05266fbdf1df062878b"><!-- INLINE RELATED POSTS 1/3 //--><style> .u86c9e99ce239a05266fbdf1df062878b { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid inherit!important; text-decoration:none; } .u86c9e99ce239a05266fbdf1df062878b:active, .u86c9e99ce239a05266fbdf1df062878b:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u86c9e99ce239a05266fbdf1df062878b { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u86c9e99ce239a05266fbdf1df062878b .ctaText { font-weight:bold; color:#C0392B; text-decoration:none; font-size: 16px; } .u86c9e99ce239a05266fbdf1df062878b .postTitle { color:#2C3E50; text-decoration: underline!important; font-size: 16px; } .u86c9e99ce239a05266fbdf1df062878b:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Илон Маск рекомендует:</span>  <span class="postTitle">Обработка блоков данных</span></div></a></div> </div><!-- .entry-content --> </article><!-- #post-## --> <div class="entry-footer"> </div> <div class="b-share b-share--post"> <div class="b-share__title">Понравилась статья? Поделиться с друзьями:</div> <span class="b-share__ico b-share__vk js-share-link" data-uri="https://vk.com/share.php?url=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhie-podskazki%2F"></span> <span class="b-share__ico b-share__fb js-share-link" data-uri="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhie-podskazki%2F"></span> <span class="b-share__ico b-share__tw js-share-link" data-uri="https://twitter.com/share?text=%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B5+%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D0%B8&url=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhie-podskazki%2F"></span> <span class="b-share__ico b-share__ok js-share-link" data-uri="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhie-podskazki%2F"></span> <span class="b-share__ico b-share__gp js-share-link" data-uri="https://plus.google.com/share?url=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhie-podskazki%2F"></span> <span class="b-share__ico b-share__whatsapp js-share-link js-share-link-no-window" data-uri="whatsapp://send?text=%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B5+%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D0%B8%20https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhie-podskazki%2F"></span> <span class="b-share__ico b-share__viber js-share-link js-share-link-no-window" data-uri="viber://forward?text=%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B5+%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D0%B8%20https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhie-podskazki%2F"></span> <span class="b-share__ico b-share__telegram js-share-link js-share-link-no-window" data-uri="https://telegram.me/share/url?url=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhie-podskazki%2F&text=%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B8%D0%B5+%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D0%B8"></span> </div> <div class="b-related"> <div class="b-related__header"><span>Вам также может быть интересно</span></div> <div class="b-related__items"> <div id="post-11784" class="post-card post-11784 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-linzy-watcom-c/"> <img width="310" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-4-310x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-linzy-watcom-c/" rel="bookmark" >Эффект линзы (watcom c)</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Эффект линзы (watcom c) Просветляющие покрытия от ZEISS Высококачественные линзы требуют высоколассного подхода: защита, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11800" class="post-card post-11800 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-xml-v-microsoft-internet-explorer-5-0/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-xml-v-microsoft-internet-explorer-5-0/" rel="bookmark" >Язык xml xml в microsoft internet explorer 5 0</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Основы XML для начинающих пользователей Введение в правильную разметку XML означает Extensible Markup Language, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11816" class="post-card post-11816 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyki-programmirovanija/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/IT-Technology-DANIA-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/IT-Technology-DANIA-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/IT-Technology-DANIA.jpg 700w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyki-programmirovanija/" rel="bookmark" >Языки программирования</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Языки программирования Язык программирования — искусственный (формальный) язык, предназначенный для записи программ для исполнителя </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11785" class="post-card post-11785 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-plameni/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/AI-is-coming-—-and-HR-is-not-prepared-8b38574-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-plameni/" rel="bookmark" >Эффект пламени</a></div> </header><!-- .entry-header --> <div class="post-card__content"> По-настоящему яркие ролики: эффект огня для видеомонтажа Как поразить зрителей с первых кадров? Самый </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11801" class="post-card post-11801 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-vvedenie/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/homepage-image-1-330x140.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-vvedenie/" rel="bookmark" >Язык xml введение</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Язык xml введение XML технологии и средства разработки Gupta Team Developer: XML технологии (Часть </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11817" class="post-card post-11817 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jakorja-html/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/shutterstock_306988172-1024x683-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/shutterstock_306988172-1024x683-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/shutterstock_306988172-1024x683-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jakorja-html/" rel="bookmark" >Якоря HTML</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Что такое ссылка якорь в HTML и как ее сделать? Когда мы имеем дело </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11786" class="post-card post-11786 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-razbitogo-teksta/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/IT-1-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/IT-1-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/IT-1-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-razbitogo-teksta/" rel="bookmark" >Эффект разбитого текста</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Создаем эффект разрушающегося текста при помощи Stipplism В сегодняшнем уроке мы создадим эффект разрушающегося </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11802" class="post-card post-11802 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-ispolzovanie-java-xml-obrabotchikov/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/54398_luca-bravo-217276-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-ispolzovanie-java-xml-obrabotchikov/" rel="bookmark" >Язык xml использование java xml обработчиков</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Java XML J ava Development Kit поставляется с двумя парсерами XML: DOM и SAX, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11818" class="post-card post-11818 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jandeks-krupnejshaja-poiskovaja-sistema/"> <img width="275" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-2-275x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jandeks-krupnejshaja-poiskovaja-sistema/" rel="bookmark" >Яндекс — крупнейшая поисковая система русскоязычного Интернета!</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Поисковые системы интернета – Полный список всех поисковых систем Чтобы увеличить посещаемость вашего сайта, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11787" class="post-card post-11787 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-skruchivanija/"> <img width="57" height="57" src="https://studiowb.ru/wp-content/uploads/2019/11/images2.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-skruchivanija/" rel="bookmark" >Эффект скручивания</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Как добиться эффекта скручивания? Люди добрые помогите! Как сделать так чтобы здание скрутилось вокруг </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11803" class="post-card post-11803 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-opisanie-tehnologii/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/cloud_lines-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-opisanie-tehnologii/" rel="bookmark" >Язык xml описание технологии</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Синтаксис и основные понятия языка XML, создание валидных документов Понятие о языке XML XML </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11819" class="post-card post-11819 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jachejka-zagolovka/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/it_eng-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jachejka-zagolovka/" rel="bookmark" >Ячейка заголовка</a></div> </header><!-- .entry-header --> <div class="post-card__content"> 17 Таблицы 17.1 Введение в таблицы Таблицы представляют отношения между данными. Авторы определяют эти </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11788" class="post-card post-11788 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffektivnoe-ispolzovanie-gnu-make/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/information-technology-330x140.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffektivnoe-ispolzovanie-gnu-make/" rel="bookmark" >Эффективное использование gnu make</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Эффективное использование gnu make Создание данного текста не имело своей целью дать полное описание </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11804" class="post-card post-11804 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-prakticheskoe-vvedenie/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/IT-Tools-for-Development-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-prakticheskoe-vvedenie/" rel="bookmark" >Язык xml практическое введение</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Описание данных с помощью XML Если вы программируете на Java, за последние пару лет </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11789" class="post-card post-11789 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffektivnyj-kopirajting-kak-pisat-kopirajting/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/artificial-intelligence_resize_md-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffektivnyj-kopirajting-kak-pisat-kopirajting/" rel="bookmark" >Эффективный копирайтинг, как писать копирайтинг</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Как написать эффективный продающий текст. Часть первая. Подготовка Грамотно написанный продающий текст позволяет превращать </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11805" class="post-card post-11805 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-prosmotr-xml-dokumentov/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/AI-is-coming-—-and-HR-is-not-prepared-8b38574-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-prosmotr-xml-dokumentov/" rel="bookmark" >Язык xml просмотр xml документов</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Чем открыть XML Web — это место, где миллионы людей ежедневно связываются друг с </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11790" class="post-card post-11790 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffektivnyj-sposob-primenenija-interfejsov-v-mdi/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/960x0-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/960x0-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/960x0-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffektivnyj-sposob-primenenija-interfejsov-v-mdi/" rel="bookmark" >Эффективный способ применения интерфейсов в mdi приложениях</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Многооконный интерфейс. Создание MDI-приложения , страница 3 Вместо дополнительных байт окна приложение может использовать </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11806" class="post-card post-11806 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-stilevye-tablicy-xsl/"> <img width="308" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-308x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-stilevye-tablicy-xsl/" rel="bookmark" >Язык xml стилевые таблицы xsl</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Отображение XML с использованием XSLT При помощи XSLT вы можете преобразовывать XML документ в </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11791" class="post-card post-11791 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekty-s-izobrazhenijami/"> <img width="275" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-2-275x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekty-s-izobrazhenijami/" rel="bookmark" >Эффекты с изображениями</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Как сделать — визуальные эффекты изображениям Узнайте, как добавить визуальные эффекты к изображениям. Фильтры </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11807" class="post-card post-11807 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-shemy-dannyh/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/IT-Tools-for-Development-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-shemy-dannyh/" rel="bookmark" >Язык xml схемы данных</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Понимание XML Узнайте, как Расширяемый язык разметки (Extensible Markup Language — XML) облегчает универсальный </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11792" class="post-card post-11792 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jumor-pivo-dlja-programmista/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jumor-pivo-dlja-programmista/" rel="bookmark" >Юмор пиво для программиста</a></div> </header><!-- .entry-header --> <div class="post-card__content"> ХАЙФХАК: ПРОГРАММИСТ ВЗЛОМАЛ СИСТЕМУ, ЧТОБЫ ПОПИТЬ ПИВО БЕСПЛАТНО / пиво :: geek новости :: </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11808" class="post-card post-11808 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-obrabotki-dannyh-awk/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/cloud_lines-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-obrabotki-dannyh-awk/" rel="bookmark" >Язык обработки данных awk</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Примеры команды AWK в Linux Введение AWK назван в честь фамилии его авторов: Альфред </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11793" class="post-card post-11793 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/ja-zagruzhaju-timagelist-dinamicheski-kak-sdelat/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/Info-tech-banner-1024x305-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/ja-zagruzhaju-timagelist-dinamicheski-kak-sdelat/" rel="bookmark" >Я загружаю timagelist динамически как сделать картинки из timagelist прозрачными</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Я загружаю timagelist динамически как сделать картинки из timagelist прозрачными? Элемент управления ImageList содержит </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11809" class="post-card post-11809 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-preobrazovanij-xsl-xslt/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/SoCIT-IT-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-preobrazovanij-xsl-xslt/" rel="bookmark" >Язык преобразований xsl (xslt)</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Введение в XSLT XSLT представляет собой способ для XML-документов в другие XML или документы </div><!-- .entry-content --> </div><!-- #post-## --> </div> </div> <meta itemprop="author" content="Study"> <meta itemprop="datePublished" content="2019-11-13T20:43:21+03:00"/> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://studiowb.ru/vsplyvajushhie-podskazki/" content="Всплывающие подсказки"> <meta itemprop="dateModified" content="2019-11-13"> <meta itemprop="datePublished" content="2019-11-13T20:43:21+03:00"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject" style="display: none;"><img itemprop="url image" src="https://studiowb.ru/wp-content/uploads/2019/11/images-2.png" alt="Кодинг, CSS и SQL"></div><meta itemprop="name" content="Кодинг, CSS и SQL"><meta itemprop="telephone" content="Кодинг, CSS и SQL"><meta itemprop="address" content="https://studiowb.ru"></div> </main><!-- #main --> </div><!-- #primary --> </div><!-- micro --> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div id="search-2" class="widget widget_search"> <form role="search" method="get" id="searchform_930" action="https://studiowb.ru/" class="search-form"> <label class="screen-reader-text" for="s_930">Поиск: </label> <input type="text" value="" name="s" id="s_930" class="search-form__text"> <button type="submit" id="searchsubmit_930" class="search-form__submit"></button> </form></div> </aside><!-- #secondary --> </div><!-- #content --> <footer class="site-footer container" itemscope itemtype="http://schema.org/WPFooter"> <div class="site-footer-inner "> <div class="footer-info"> © 2021 Кодинг, CSS и SQL </div><!-- .site-info --> <div class="footer-counters"> </div> </div><!-- .site-footer-inner --> </footer><!-- .site-footer --> <button type="button" class="scrolltop js-scrolltop"></button> </div><!-- #page --> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="//www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><script type='text/javascript'> /* <![CDATA[ */ var lang_array = {"text1":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","text2":"\u0438\u0437"}; var wps_ajax = {"url":"https:\/\/studiowb.ru\/wp-admin\/admin-ajax.php","nonce":"fd9a230abc"}; /* ]]> */ </script> <script src='https://studiowb.ru/wp-content/themes/root/js/scripts.min.js?ver=2.3.2'></script> <script src='https://studiowb.ru/wp-includes/js/comment-reply.min.js?ver=5.2.10'></script> <script src='https://studiowb.ru/wp-includes/js/wp-embed.min.js?ver=5.2.10'></script> <!--LiveInternet counter--><script type="text/javascript"> new Image().src = "//counter.yadro.ru/hit?r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";h"+escape(document.title.substring(0,150))+ ";"+Math.random();</script><!--/LiveInternet--> </body> </html>