Всплывающая подсказка css: Можно ли изменить вид всплывающей подсказки?
Можно ли изменить вид всплывающей подсказки?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 8.0+ | 2.0+ | 1.0+ |
Задача
Сделать всплывающую подсказку при наведении на картинку, оформление подсказки должно управляться через стили.
Решение
Всплывающая подсказка, добавляемая к изображениям через атрибут title тега <img>, является системным элементом, поэтому вид подсказки зависит от используемого браузера, операционной системы и её настроек. Хотя напрямую изменить оформление подсказки нельзя, допустимо пойти обходным путем и имитировать всплывающую подсказку с помощью JavaScript.
Для начала создадим пустой элемент <div> с идентификатором floatTip и определим его стиль. Обязательными должны быть три стилевых свойства — position со значением absolute, оно задаёт абсолютное позиционирование элемента, display со значением none скрывает элемент и width задаёт ширину подсказки. Остальные свойства выступают по желанию разработчика и предназначены для изменения оформления слоя (пример 1).
Пример 1. Стиль для всплывающей подсказки
#floatTip {
position: absolute; /* Абсолютное позиционирование */
width: 250px; /* Ширина блока */
display: none; /* Прячем от показа */
border: 1px solid #000; /* Параметры рамки */
padding: 4px; /* Поля вокруг текста */
font-family: sans-serif; /* Рубленый шрифт */
font-size: 9pt; /* Размер шрифта */
color: #333; /* Цвет текста */
background: #ffe5ff; /* Цвет фона */
}Сам скрипт состоит из двух функций — moveTip отслеживает движение мыши и в соответствии с координатами курсора меняет положение элемента, и toolTip управляет видимостью элемента и выводит в нём желаемый текст (пример 2).
Пример 2. Скрипт для вывода слоя
document.onmousemove = moveTip; function moveTip(e) { floatTipStyle = document.getElementById("floatTip").style; w = 250; // Ширина подсказки // Для браузера IE6-8 if (document.all) { x = event.clientX + document.body.scrollLeft; y = event.clientY + document.body.scrollTop; // Для остальных браузеров } else { x = e.pageX; // Координата X курсора y = e.pageY; // Координата Y курсора } // Показывать слой справа от курсора if ((x + w + 10) < document.body.clientWidth) { floatTipStyle.left = x + 'px'; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + 'px'; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + 'px'; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; // Показываем подсказку floatTipStyle.display = "block"; } else { // Прячем подсказку floatTipStyle.display = "none"; } }
Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через атрибут src тега <script>. Окончательный код показан в примере 3.
Пример 3. Создание всплывающей подсказки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Всплывающая подсказка</title> <style> #floatTip { position: absolute; width: 250px; display: none; border: 1px solid #000; padding: 4px; font-family: sans-serif; font-size: 9pt; color: #333; background: #ffe5ff; } </style> <script src="scripts/tooltip.js"></script> </head> <body> <p><img src="images/odel.jpg" alt="Фотография" ></p> <div></div> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Всплывающая подсказка, выводимая с помощью JavaScript
Создание всплывающих подсказок с использованием только CSS
Во всех браузерах можно создать простые всплывающие подсказки для элементов HTML, используя атрибут title (название), как в примере ниже.
Демонстрация работы
Атрибут HTML title
<a href="" title="Example of Tooltip">Tooltip</a>
Код HTML, расположенный выше, создаст следующий эффект:
Tooltip
Если навести указатель мыши на расположенную выше ссылку, появится обычная браузерная всплывающая подсказка с текстом: «Example of Tooltip» (пример всплывающей подсказки).
Эта возможность очень удобна для того, чтобы просто и быстро создать всплывающую подсказку, но, к сожалению, ей нельзя задать стили. Что же делать, если нужно создать необычную всплывающую подсказку?
Код CSS для всплывающей подсказки
Есть несколько способов, чтобы задать стили всплывающим подсказкам.
Можно задать стили CSS атрибуту title и использовать псевдоэлементы :before или :after, чтобы добавить содержимое в код CSS, например, следующим образом:
[title]{
position:relative;
}
[title]:after{
content:attr(title);
color:#fff;
background:#333;
background:rgba(51,51,51,0.75);
padding:5px;
position:absolute;
left:-9999px;
opacity:0;
bottom:100%;
white-space:nowrap;
-webkit-transition:0.25s linear opacity;
}
[title]:hover:after{
left:5px;
opacity:1;
}Это отличное решение, но, к сожалению, использование только атрибута title все равно не изменит внешний вид всплывающих подсказок, у них будут стили браузера по умолчанию. Придется использовать JavaScript, чтобы выключить стили браузера по умолчанию и использовать стили, заданные атрибуту title.
Но в этом уроке мы покажем, как создать всплывающие подсказки, используя только CSS и не используя JavaScript.
Чтобы создать всплывающие подсказки на чистом CSS, нужно удалить атрибут title из ссылки и вставить текст всплывающей подсказки в тег span в ссылке.
Вот код HTML, который понадобится для ссылок:
<a href="">adipiscing elit<span>This is the first tooltip</span></a>
Теперь нужно, чтобы содержимое тега span появлялось при наведении указателя мыши на ссылку, этого можно добиться с помощью кода CSS ниже:
a span{
display:none;
color:#fff;
background:rgba(51,51,51,0.75);
padding:20px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
width:100px;
text-align:center;
position: absolute;
z-index:10;
}
a { display: inline-block;}
a:hover span{ display:block; }Для начала нужно спрятать первый тег span, используя свойство display: none;, после чего задать нужные для всплывающей подсказки стили.
Все, что остается сделать, — показывать всплывающую подсказку при наведении указателя мыши на ссылку, используя следующий код CSS:
a:hover span{ display:block; }Теперь у нас есть работающие всплывающие подсказки на чистом CSS3.
Использование разных всплывающих подсказок
В примере выше все всплывающие подсказки будут одинаковыми, но как быть, если нужно задать другие стили некоторым всплывающим подсказкам? Наиболее простой способ сделать это — добавить классы тегам span, после чего задавать стили этим классам в CSS.
Если нужно изменить цвет фона с черного на другой цвет, это можно сделать, например, так:
<a href="">Duis sit amet pretium purus.<span>The blue tooltip</span> <a href="">convallis egestas felis suscipit<span>The red tooltip</span></a> <a href="">augue pharetra gravida<span>The yellow tooltip</span></a> <span>The green Tooltip</span></a>
Код CSS для изменения цвета фона будет таким:
span.blue{
background:rgba(41,137,216, 0.75);
border:1px solid #1E5799;
}
span.red{
background:rgba(247,49,49, 0.75);
border:1px solid #F73131;
}
span.yellow{
background:rgba(241,218,54, 0.75);
border:1px solid #f1da36;
color:black;
}
span.green{
background:rgba(41,154,11, 0.75);
border:1px solid #299a0b;
}Посмотрите пример, чтобы увидеть, как это будет работать.
Автор урока Paul Underwood
Перевод — Дежурка
Смотрите также:
Создание всплывающих подсказок с использованием CSS
При создании веб-приложения нередко может возникнуть необходимость в предоставлении пользователям дружественных всплывающих подсказок, объясняющих особенности интерфейса. Можно сделать это, используя ссылки на отдельные страницы с текстами, разъясняющими соответствующие темы. Но тогда пользователи могут забыть, чем они занимались до перехода по таким ссылкам, что не очень дружественно. Более удачный путь — показать разъясняющий текст прямо там, где он нужен. В этом уроке мы покажем, как этого можно добиться с помощью нескольких правил CSS и небольшого количества кода HTML.
Код HTML
Первым делом запишем разметку для всплывающей подсказки. Вот как она может выглядеть:
<div>
<p>This is the inline help tip! It can contain all kinds of HTML. Style it as you please.</p>
</div>Элемент абзаца отображается как текст всплывающей подсказки на черном фоне, а блок класса .help-tip — это голубой круг со знаком вопроса внутри.
Всплывающая подсказка с помощью CSS
Абзац по умолчанию спрятан и появляется только при наведении указателя мыши на голубой круг со знаком вопроса. В абзаце могут быть ссылки, изображения и другие строчные элементы HTML. Текст всплывающей подсказки плавно проявляется с помощью анимации CSS, что можно увидеть в демонстрации.
Код CSS
Все это реализуемо с помощью короткого кода CSS, который можно найти в таблице стилей style.css в архиве, находящемся по ссылке для скачивания:
.help-tip{
position: absolute;
top: 18px;
right: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* Всплывающая подсказка */
display: none;
text-align: left;
background-color: #1E2021;
padding: 20px;
width: 300px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip p:before{ /* Указатель всплывающей подсказки */
position: absolute;
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#1E2021;
right:10px;
top:-12px;
}
.help-tip p:after{ /* Не позволить исчезнуть всплывающей подсказке */
width:100%;
height:40px;
content:'';
position: absolute;
top:-40px;
left:0;
}
/* Анимация CSS */
@-webkit-keyframes fadeIn {
0% {
opacity:0;
transform: scale(0.6);
}
100% {
opacity:100%;
transform: scale(1);
}
}
@keyframes fadeIn {
0% { opacity:0; }
100% { opacity:100%; }
}Некоторым версиям браузеров нужна приставка производителя -webkit для анимаций, определяемых ключевыми кадрами, так что на всякий случай здесь приводится и эта запись. Эта анимация задает масштаб элементу от правого верхнего угла при помощи свойства начала анимации и анимирует прозрачность. Она включается при наведении указателя мыши, так что пока он находится на всплывающей подсказке, она останется видимой.
Важно обратить внимание, что блоку, содержащему голубой круг со знаком вопроса, нужно задать относительное расположение, чтобы он появлялся в правом верхнем углу.
Надеемся, что Вам понравился этот урок и что он пригодится Вам для создания веб-приложений.
Демонстрация работы – Скачать исходный код
Автор урока Martin Angelov
Перевод — Дежурка
Смотрите также:
Всплывающая подсказка с собственным стилем, используя только HTML + CSS
Автор: Администратор
Просмотров: 5269
Теги: css, html, css3
В этой статье мы расскажем о том, как сделать красивую всплывающую подсказку только средствами HTML и CSS.
Ранее мы уже написали статью Всплывающая подсказка с собственным дизайном и стилем, но данная статья рассматривает создание при помощи jQuery. Для некоторых это не приемлемый вариант или им попросту нет необходимости использовать эту библиотеку.
Сразу оговоримся, данный метод будет работать только для двойных тегов (которые имеют открывающий и закрывающие теги).
Суть будет состоять в том, что внутрь тега, которому необходимо добавить всплывающую подсказку с уникальным дизайном мы будем помещать скрытый блок, который будет появляться при наведении.
Подготовим разметку для примера:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Страница</title> <link rel="stylesheet" href="/../css/template.css" type="text/css" /> </head> <body> <p>Наведи на этот текст, чтобы увидеть подсказку<span>Всплывающая подсказка</span></p> </body> </html>
И соответствующие стили:
body {
margin:70px 0 0 10px;
}
.tooltip {
/* задаем стиль внешнего вида */
padding:10px;
border:1px solid #333;
background:#666666;
color:#fff;
/* скрываем */
display:none;
/* размещаем прямо над текстом-родителем */
bottom:101%;
left:0;
position:absolute;
}
/* при наведении - показываем подсказку */
p:hover .tooltip {
display:block;
}
p {
/* обязательно, иначе подсказка уедет */
position:relative;
}Вроде бы вот и всё, но у этого способа есть очень много недочетов, некоторые из них:
- Если на странице будет два одинаковых элемента с такой подсказкой, то при наведении появятся все подсказки (решается — добавлением каждому элементу уникального класса, как следствие увеличивается html и css код)
- Задать отображение подсказки в правом верхнем углу, относительно текста можно, только если родительский блок подсказки занимается полностью текстом (решение — подгонять блоки по ширине под текст, например div).
Но способ хорошо работает, например для ссылок(они сжимаются по тексту), а если вам нужно сделать подсказку только для одной или нескольки ссылок, то он так же вполне подойдет, не наполняя код лишними классами и селекторами.
Пример вы можете посмотреть на демо-странице:
Всплывающие подсказки
3 395 Скрипты / TooltipВсплывающие подсказки
Семь стилевых оформлений всплывающих подсказок (tooltip) на jQuery и CSS3 для вашего сайта.
2 942 Скрипты / TooltipTooltip на jQuery и CSS
Всплывающие подсказки при наведении использующие библиотеку jQuery и CSS. Тут нет никаких специальных плагинов, просто одна функция и её вызов.
1 586 Скрипты / TooltipПодсказки с пузырьками
Плагин для библиотеки Mootools — bubbles — подсказки с пузырьками. Работает к сожалению на устаревшей версии Mootools 1.1.2, но смотрится очень красиво.
1 860 Скрипты / TooltipCSS3 тултипы — подсказки
Всплывающие подсказки реализованные на CSS. К подсказке можно прикрепить и изображение.
1 798 Скрипты / TooltipПлагин подсказок MopTip
Плагин всплывающих подсказок MopTip. Всплывающий mopBox может содержать DIV, изображения, флешки, видео и т.д. Работает в: Safari 4+, Firefox 3+, Opera 9+, IE6, IE7, IE8+, Chrome.
5 710 Скрипты / TooltipИзображение-подсказка при наведении
Эффект всплывающей подсказки — изображения при наведении на иконку — миниатюру картинки.
2 058 Скрипты / TooltipCSS3 tooltips (подсказки)
Реализованные только на CSS всплывающие подсказки для отдельных элементов сайта.
1 728 Скрипты / TooltipПростой tooltip — just the tip
Простой в использовании тултип Just The Tip, если вы конечно хотя бы немножко знаете html и jаvascript. В подсказке может использоваться, как текст, так и изображения и даже видео.
1 981 Скрипты / TooltipПростой tooltip плагин
Плагин подсказок (tooltip) имеет поддержку всех браузеров и прост в применении. Гибкая настройка под любой ваш проект.
1 813 Скрипты / TooltipПодсказка при наведении — vTip
Простой и очень легкий по размеру эффект всплывающей подсказки.
Как создать всплывающие при наведении подсказки на CSS?
Удобный, интуитивно понятный и со вкусом оформленный сайт – это главная цель любого веб-разработчика. Но что делать, если мощный функционал Вашего проекта значительно усложняет пользовательский интерфейс, и без подсказок посетителю будет ложно сориентироваться? Или Вы создаете сайт с легким элегантным дизайном и не хотите загромождать его лишней информацией, но без этой «информации» не обойтись?
Одним из наиболее часто применяемых способов увеличить информативность сайта, не навредив при этом дизайну, являются всплывающие подсказки.
Предпосылки
Современные js-технологии предлагают нам широкий выбор готовых решений, но в этот раз речь пойдет не о них.
Сегодня мы рассмотрим построение кросс-браузерных всплывающих при наведении подсказок на чистом CSS.
Зачем изобретать велосипед, спросите Вы? Ведь в HTML есть атрибут title, позволяющий выводить подсказку при наведении. Но вся соль в том, что темизация такой подсказки не представляется возможной. Такой порядок вещей приводит нас к необходимости самим создать всплывающие подсказки.
Создаем всплывающую подсказку сами
Итак, всплывающая подсказка. Для лучшего понимания материала, предлагаю учиться на рабочем примере. Напишем простой HTML код:
CSS:
<a href="#"><span> <img src="../css/image/info.jpeg" alt="Информация" /> <em>Акция!</em> Заказав этот товар, вы получаете бесплатную доставку по Украине!</span> Купить</a>
Как видим, у нас есть ссылка «Купить» с классом .tooltip, который в дальнейшем поможет нам управлять поведением всплывающей при наведении подсказки (почему именно ссылка – читайте подпункт «Важно»). Внутри нее размещаем span в котором будет содержаться выводимая информация. Для придания «современности» дизайна, добавлена картинка. В нашем примере картинка лежит в директории «../css/image/ » относительно html страницы.
Теперь зададим базовую стилизацию.
CSS:
.tooltip {
position: relative;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span {
visibility: hidden; /*прячем подсказку*/
position: absolute;
bottom: 30px;
z-index: 999;
width: 280px;
margin-left: -127px;
padding: 10px;
opacity: .9; /*устанавливаем прозрачность*/
background-color: darkturquoise; /*Задаем цвет фона*/
text-align: justify;
font-weight: bold;
}
.tooltip:hover {
border: 0; /* Фиксим появление бага в IE6*/
}
.tooltip:hover span {
visibility: visible; /*Задаем поведение: отобразить при наведении*/
}Обратите внимание на строчку
при наведении на ссылку, стандартный системный курсор изменяет свой вид, и тем самым подсказывает пользователю, что сейчас он получит дополнительную информацию.
Вот что у нас получилось:
Такая всплывающая подсказка будет работать даже в древних браузерах. Но мы не будем отставать от прогресса, и используем возможности современных браузеров.
Создадим линейный градиент при помощи linear-gradient, и зададим border-radius для округления углов блока. Для придания эффекта объемности добавим тень для текста и подсказки в целом.
Вставляем внутрь .tooltip span следующий код.
CSS:
border: 3px solid mediumturquoise; background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; text-shadow: 0 1px 0 rgba(255,255,255,.4);
Сравним полученный результат с предыдущим:
При желании, опять-таки для придания объемности, можно визуально вынести картинку за пределы подсказки. Текст внутри тоже можно немного причесать.
CSS:
.tooltip img {
position: absolute;
left: -24px;
top: -24px;
float: left;
}
em {text-align: center;
display: block;
font-weight: bolder;
}Как для учебного примера, то получилось, в принципе, неплохо. Но я уверен, что у вас получится значительно лучше!
Но что делать, если Вам необходимо визуально указать, с какого именно элемента выскочило сие чудо? Дорисуем стрелочку при помощи псевдоэлементов.
CSS:
.tooltip span:before,
.tooltip span:after {
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid darkturquoise;/*цвет стрелочки*/
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before {
border-top-color: mediumturquoise; /*обрамление стрелочки*/
bottom: -8px;
}При оформлении стрелочки, обратите внимание на комментарии, они помогут Вам быстро настроить цветовую схему.
Вот пример черной стрелки с золотым обрамлением:
Важно!!!
- Кросс-браузерность. Всплывающие подсказки такого типа корректно работают во всех современных браузерах (начиная с IE6, Fx-4, Op-9.5, Sf-4, Cr).
Если вы создаете подсказки со стрелочками, то для IE6-7 придется эмулировать псевдоэлементы before, after.
- Почему ссылка? Дело в том, что IE6 относительно корректно отрабатывает свойство :hover лишь в том случае, когда оно применяется к ссылке. Если вы не оптимизируете свой сайт под такую древность – можете использовать другие теги (например, span).
- При желании, Вы можете использовать js-код для расширения функционала и/или задания особых эффектов (например, медленное появление и исчезновение и т.д.).
Общие замечания
- Обратите внимание на фон страницы, на которой мы выводили подсказки. Он не является однообразным, и на нем полупрозрачная подсказка приобретает некую изюминку. Учтите этот момент при подборе фона документа.
- Вас могло заинтересовать, зачем элементу span было присвоено класс «customInfo». Дело в том, что на своем сайте Вам может понадобится несколько типов информационных подсказок, отличающихся цветовой схемой, градиентом и т.д. Для этого удаляем из «.tooltip span» свойства, которые мы хотим изменить, например
border: 3px solid mediumturquoise; opacity: .9; background-color: darkturquoise;
и оформляем новый класс:
.customWorring { border: 3px solid red; opacity: .8; background-color: pink; }Таким образом мы получим розовую полупрозрачную подсказку с красной окантовкой. Изменим картинку в теле ссылки на красный восклицательный знак, – и предостерегающая подсказка готова.
- Ну и напоследок, личное мнение автора – подсказки на чистом CSS – это вещь! Вам не нужно играться с готовыми js-скриптами, подключать внешние файлы, ваши странички не теряют скорости загрузки. А самое главное – кросс-браузерная всплывающая подсказка создана собственными руками, и пределов для ее кастомизации практически нет.
Оценок: 5 (средняя 5 из 5)
Минутку …
Включите файлы cookie и перезагрузите страницу.
Этот процесс автоматический. Ваш браузер в ближайшее время перенаправит вас на запрошенный контент.
Подождите до 5 секунд…
+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [ ] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (+ !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! [] ) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] +! ! []) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) +! ! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []))
+ ((! + [] + (!! [] ) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) — []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [ ]) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [])) / + ((! + [] + (!! []) +! ! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] +! ! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [ ] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [ ] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []))
+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + [ ]) + (! + [] + (!! []) — []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [ ] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] +! ! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [ ]) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) — [] ) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])))
+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [] + ( !! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! []) + !! [] + []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (! ! []) — []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []))
+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + ( ! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! []) ) + (! + [] — (!! [])) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + ( !! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!!
Подсказка | jQuery UI
Настраиваемые всплывающие подсказки, заменяющие встроенные всплывающие подсказки.
Наведите указатель мыши на ссылки выше или используйте клавишу табуляции, чтобы переключать фокус на каждом элементе.
просмотреть исходный код1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
|
