Всплывающие подсказки в Word – это небольшие всплывающие окна, которые показывают поясняющий текст о команде или параметре, на который наведен указатель мыши. Можно создать собственные всплывающие подсказки для слов, фраз или картинок в документах.
Обычно всплывающие подсказки создаются при помощи гиперссылок и переносят пользователя в другое место в документе, на другую веб-страницу или создают новое сообщение электронной почты, если это почтовая ссылка. В случае, когда обычная гиперссылка не нужна, можно создавать всплывающие подсказки при помощи закладок.
Прежде чем приступить к созданию всплывающей подсказки, убедитесь, что эта опция включена в параметрах Word. Для этого откройте вкладку Файл (File).
В меню слева нажмите Параметры (Options).
По умолчанию должен открыться раздел Общие (General).
В группе Параметры пользовательского интерфейса (User Interface options) должен быть выбран параметр Показывать расширенные всплывающие подсказки (Show feature descriptions in ScreenTips).
Этот параметр включает показ всплывающих подсказок, в том числе расширенных (они дают больше информации о командах). Вы можете увидеть встроенную всплывающую подсказку, когда наведете указатель мыши на одну из команд, расположенных на ленте.
Расширенные всплывающие подсказки могут содержать имя команды, сочетание клавиш, связанную картинку и ссылку на статью со справочной информацией.
Примечание: Если выбрать параметр Не показывать расширенные всплывающие подсказки (Don’t show feature descriptions in ScreenTips), будут показаны простые всплывающие подсказки без расширенной информации. Вы увидите только имя команды и в некоторых случаях сочетание клавиш.
Нажмите ОК, чтобы сохранить изменения и закрыть диалоговое окно Параметры Word (Word Options).
Чтобы создать собственную всплывающую подсказку, выделите слово, фразу или картинку, к которой нужно привязать всплывающую подсказку, и откройте вкладку Вставка (Insert).
В разделе Ссылки (Links) нажмите Закладка (Bookmark).
Примечание: Обратите внимание на всплывающую подсказку, которая появляется при наведении указателя мыши на команду Закладка (Bookmark). Эта расширенная всплывающая подсказка содержит имя команды, описание и ссылку на дополнительную информацию о команде.
Введите название закладки в поле Имя закладки (Bookmark name) диалогового окна Закладка (Bookmark). Часто в качестве имени используют слово, к которому будет привязана закладка, или что-то с ним связанное. Нажмите Добавить (Add).
В имени закладки пробелы недопустимы.
Закладка добавлена. Закройте диалоговое окно.
Теперь мы сделаем так, чтобы закладка ссылалась на саму себя, т.е. чтобы при щелчке мышью по ссылке Вы никуда не перемещались. Затем добавим текст к нашей всплывающей подсказке.
Убедитесь, что слово, фраза или картинка, к которой нужно привязать всплывающую подсказку, выделены. Затем нажмите Ctrl+K, чтобы открыть диалоговое окно Вставка гиперссылки (Insert Hyperlink). В разделе Связать с (Link to) в левой части диалогового окна нажмите Место в документе (Place in This Document).
В разделе Закладки (Bookmarks) выберите закладку, которую только что создали. Если Вы не видите список закладок, нажмите на + слева от раздела с закладками, чтобы развернуть список. Кликните по кнопке Подсказка (ScreenTip), чтобы добавить текст всплывающей подсказки.
В диалоговом окне Подсказка для гиперссылки (Set Hyperlink ScreenTip) в поле Текст подсказки (ScreenTip text) введите текст всплывающей подсказки. Можно скопировать текст из документа или из другого приложения и вставить его в это поле. Нажмите ОК.
- Нажмите ОК в диалоговом окне Вставка гиперссылки (Insert Hyperlink), чтобы закрыть его.
- Теперь, когда Вы наведёте указатель мыши на слово, фразу или картинку, к которой только что привязали всплывающую подсказку, появится окно с заданным текстом.
Обратите внимание, что всплывающая подсказка предлагает нажать Ctrl и кликнуть по ссылке, чтобы перейти по ней. Так как мы создали закладку, которая ссылается сама на себя, эта ссылка никуда не приведёт.
Когда Вы кликните по ней, курсор переместится к началу закладки.
Вы можете удалить текст “Нажмите ctrl и щёлкните ссылку” (или “Ctrl+Click to follow link” – для английской версии Word) из всплывающей подсказки, правда в этом случае переход по ссылке будет осуществляться без нажатия клавиши Ctrl, т.е. одним щелчком мышки.
Оцените качество статьи. Нам важно ваше мнение:
Источник: https://office-guru.ru/word/kak-v-word-2013-sozdavat-sobstvennye-vsplyvayuschie-podskazki-101.html
Как делается в html всплывающая подсказка?
От автора: здравствуйте. Всплывающая подсказка — это небольшой поясняющий текст, который появляется при наведении на какой-то элемент, обычно на картинку. Сегодня мы посмотрим, как можно сделать в html всплывающую подсказку разными способами.
Стандартная подсказка
По умолчанию за вывод поясняющего текста отвечает атрибут title. Его можно указывать разным элементам, но обычно используют только для картинок, чтобы объяснить, что на них изображено.
В одной из прошлых статей я использовал изображение тигра, чтобы показать работу с размерами картинки. Если вы не против, я использую опять это изображение. Итак, для вывода подсказки необходимо всего лишь добавить атрибут title и в нем написать нужный текст.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:
Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.
Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.
Способ на чистом css
Очень интересный способ, который позволяет красиво вывести подсказку для изображения. Html-разметка проста, только изображение нужно заключить в блок-контейнер, которому повесим идентификатор, чтобы позже обратиться к нему в стилях:
Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.
Итак, для начала опишем стили для контейнера. Относительное позиционирование нужно нам потому, что мы будем позиционировать абсолютно блок с поясняющим текстом, чтобы позиционирование происходило относительно родительского блока, а не всей страницы.
#tiger{
position: relative;
display: inline-block;
}
Блочно-строчное отображение же помешает блоку (а вместе с ним и блоку с подсказкой, которой мы создадим) растянуться на всю ширину окна. Осталось создать саму подсказку. В css это очень удобно делать с помощью псевдоэлементов. Вот так:
#tiger:hover:after {
content: attr(data-name);
position: absolute;
left: 0;
bottom: 0;
background: rgba(5,13,156,.55);
color: #fff;
text-align: center;
font-family: cursive;
font-size: 14px;
padding: 3px 0;
width: 100%;
}
| content: attr(data-name);background: rgba(5,13,156,.55); |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.
Далее позиционируем элемент абсолютно, задаем произвольно цвет и фон, шрифт, выравнивание, отступы и ширину. В итоге на выходе получается вот что:
Эта подсказка появляется при наведении на картинку, но в отличие от стандартной она делает это резко, а также само появление происходит непосредственно в момент наведения. Плавное появление в данном случае реализовать не получится, потому что для псевдоэлементов плавные переходы не поддерживаются.
Способ 2. Чистый css и плавное появление
Впрочем, совсем немного переписав код можно добиться плавного появления подсказки, причем, опять же, не используя javascript.
Чтобы самостоятельно увидеть 2 эффекта, которые я покажу вам далее, я рекомендую открыть блокнот или любой удобный редактор кода и повторять все за мной. Правда для этого еще нужно подключить стилевой файл, хотя стили можно писать и в html в тегах
Итак, код этого примера будет немного отличаться, и это по той причине, что мы не будем использовать псевдоэлемент. Именно из-за него невозможно было применить плавные изменения. В этот раз код будет выглядеть так:
Суматранский тигр
| Суматранский тигр |
CSS код не претерпел каких-то огромных изменений:
#tiger2{
position: relative;
display: inline-block;
}
#tiger2 .text {
transition: all 0.6s;
opacity: 0;
position: absolute;
left: 0; bottom: 0;
background: rgba(5,13,156,.55);
color: #fff;
text-align: center;
font-family: cursive;
font-size: 14px;
padding: 3px 0;
width: 100%;
transform: scale(0);
}
#tiger2:hover .text{
opacity: 1;
}
| background: rgba(5,13,156,.55); |
Убираем только свойство content, так как оно поддерживается лишь псевдоэлементами. Дописываем свойство transition, которое и создает плавные переходы состояний. Ну а opacity: 0 даст нашему блоку с подсказкой полную прозрачность, поэтому он не будет виден на странице.
При наведении на блок теперь достаточно вернуть нормальную прозрачность блоку с подсказкой. Готово. Можете проверить, элемент появляется плавно.
С помощью css3 можно скрыть элемент и по-другому. С помощью трансформаций, например.
Замените полную прозрачность на вот такое свойство: transform: scale(0) и размер блока будет уменьшен до нулевого, так что его попросту не будет на экране.
При наведении же на блок с картинкой следует вернуть нормальный размер вот так: transform: scale(1). В таком случае эффект появления будет смотреться еще красивее. Можете убедиться в этом сами.
Как видите, на css всплывающая подсказка также может появляться медленно с красивыми эффектами.
Другие способы
Еще больше возможностей вам может дать jQuery. С помощью этой библиотеки можно написать код для вывода подсказки как самостоятельно, так и найти какой-нибудь плагин, который уже реализует это дело.
Например, в фреймворке Bootstrap тоже есть много готовых компонентов и один из них, это как раз всплывающие подсказки.
Вы можете посмотреть в документации к фреймворку примеры кода, которые позволяют создать эти самые подсказки, и использовать их.
Необязательно подключать весь Bootstrap, можно вообще оставить только такой компонент, как подсказки (toolptips), скачать и подключить только его.
В общем, сегодня я показал вам способы на css, как сделать красивую подсказку с резким и плавным появлением, помимо этого в вашем арсенале есть Bootstrap и jQuery. Выбирайте что угодно и реализовывайте интересные и красивые подсказки на своих сайтах!
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Источник: https://webformyself.com/kak-delaetsya-v-html-vsplyvayushhaya-podskazka/
Как установить пользовательский текст всплывающей подсказки в MS Excel
Вы можете вставлять гиперссылки в MS Excel так же, как в MS PowerPoint или MS Word. Фактически, если вы вставите ссылку в ячейку, Excel автоматически преобразует ее в интерактивную ссылку. Вставка ссылки в ячейку — это быстрый и простой способ вставки гиперссылки.
Он выполняет свою работу, даже если выглядит не очень хорошо. Если вы хотите, чтобы электронная таблица выглядела лучше, рекомендуется связать текст и добавить в него настраиваемую подсказку для гиперссылки.
Настраиваемая подсказка для гиперссылки
Сначала обо всем Скопируйте ссылку, которую вы хотите добавить в вашу таблицу в буфер обмена. Затем откройте файл Excel и выберите ячейку, в которую хотите вставить ссылку. На ленте перейдите на вкладку «Вставка» и нажмите кнопку «Ссылка» в конце.
Откроется диалоговое окно «Вставить гиперссылку». Предполагая, что вы хотите создать ссылку на веб-страницу, просто вставьте скопированную ссылку в буфер обмена в поле «Адрес» внизу. Затем перейдите в поле «Текст для отображения» и введите текст, на который хотите сослаться.
Например, если вы хотите добавить ссылку на AddictiveTips, вы напишите AddictiveTips в поле «Текст для отображения» и вставьте его. ссылка на сайт в поле Адрес.
Далее вы можете ввести настраиваемую подсказку с гиперссылкой. Нажмите кнопку подсказки рядом с полем «Текст для отображения». Здесь вы вставите текст, который хотите отобразить, когда курсор будет расположен над ячейкой со ссылкой. Нажмите OK, когда вы закончите.
Так выглядит подсказка для настраиваемой гиперссылки в MS Excel,
Эти параметры недоступны, если вы вставляете ссылки в Excel, просто вставляя их в ячейку, потому что текст, который является связанный и подсказка являются необязательными полями. Вы можете вставить ссылку, и введенный текст будет самой ссылкой. Подсказка будет такой же, как ссылка.
Для некоторых пользователей это может работать. Если вы публикуете свой лист в Интернете, пользователи могут предпочесть увидеть, на какой сайт они ссылаются.
Для листов, которыми вы делитесь внутри, подсказка является отличным способом добавить дополнительную информацию о ссылке, не делая все остальное плохо выглядящим и не затеняя числа текстовыми полями.
Похоже, что текст подсказки не имеет предел символов. Теоретически, вы можете делать это сколько угодно, но на практике это хорошая идея, чтобы сделать его кратким.
Источник: https://crazygamer.ru/kak-ustanovit-polzovatelskij-tekst-vsplyvayushhej-podskazki-v-ms-excel/
Как сделать всплывающую подсказку в HTML и CSS?
- Приветствую вас на сайте Impuls-Web!
- Довольно часто возникает необходимость сделать всплывающую подсказку html для того, что бы пояснить пользователю какой-то момент на странице сайта, или, к примеру, сделать пояснение к изображению, которое будет появляться при наведении на него указателя мышки.
- В сегодняшней статье я покажу вам два простых способа, с помощью которых с легкостью делается всплывающая подсказка html-кодом и css-стилями.
Навигация по статье:
- Всплывающая подсказка HTML
- Всплывающая подсказка CSS
Итак, для создания всплывающей подсказки html мы можем использовать атрибут title, который можно присвоить для любого элемента на странице. В случае если данный атрибут задан для какого либо элемента, то при наведении указателя мышки на данный элемент будет появляться всплывающая подсказка.
Например:
Скачать
| Скачать |
Результат:
Скачать
Или вот еще один пример с использованием картинки:
Результат:
Как видите все просто, но данная всплывающая подсказка html имеет ряд своих недостатков. А именно, все параметры отображения, такие как шрифт, цвет, размер задаются исходя из параметров браузера, и вы ни как не можете на них повлиять.
Всплывающая подсказка CSS
Второй способ заключается в том, что мы можем создать всплывающую подсказку CSS, и задать для нее такое визуальное оформление, как нам нужно. Для этого мы создадим дополнительный блок после элемента, для которого нужно сделать всплывающую подсказку CSS, в нем разместим нужный текст, а затем css-стилями зададим нужные параметры визуализации.
HTML-код:
Перейти на статью: Как задать расстояние между строк CSS?
| Перейти на статью: Как задать расстояние между строк CSS? |
CSS-стили:
.img-text{
position:relative;
display:block;
width:300px; /*задаём ширину блока*/
margin:auto;
}
.
podskazka{
margin:0px!important;
opacity: 0;
position: absolute;
width: 100%;
left: 0; /*отступ слева*/
top: 105px; /*отступ сверху*/
padding:8px 0px;
font-weight:bold;
background: #444; /*задаём цвет фона*/
color: #fff!important;
text-align: center; /*выравнивание текста*/
font-size: 14px; /*размер шрифта*/
transition: all 0.6s;
}
.img-text:hover .podskazka{
opacity: 0.8; /*задаём уровень прозрачности*/
}
|
.img-text:hover .podskazka{ opacity: 0.8; /*задаём уровень прозрачности*/} |
Вот что получится:
Перейти на статью: Как задать расстояние между строк CSS?
Данными стилями мы задаем стилизацию нашей подсказке и делаем ее полностью прозрачной. А далее при наведении указателя мышки на картинку, делаем ее видимой.
Конечно данный способ создания всплывающей подсказки CSS немного трудоемкий в плане кода, но вы можете сделать заготовку для различных случаев, а потом просо подставлять нужные классы для элементов с подсказками.
Надеюсь, моя статья будет для вас полезна и поможет вам сделать удобные и информативные подсказки. Если данная статья вам понравилась, обязательно оставьте комментарий, поделитесь ею в социальных сетях и подпишитесь на мою рассылку.
Желаю вам удачи! До встречи в следующих статьях!
С уважением Юлия Гусарь
Источник: https://impuls-web.ru/kak-sdelat-vsplyvayushhuyu-podskazku-v-html-i-css/
Как сделать всплывающую подсказку в css
- Доброго времени суток уважаемый пользователь, сегодня я хотел бы поговорить о том как можно создать всплывающие подсказки в тексте с использованием CSS , ну и создать несколько примеров.
- И так что такое «всплывающие подсказки» — это текст или картинка которые отображаются при наведении указателя мыши на ссылку или другой какой то элемент на странице, если в атрибуте title есть ее описание.
- Всплывающую подсказку Вы можете применять как для ссылок, так и для любых изображений.
- В обычном виде без оформления подсказка имеет примерно такой вид как на фото ниже:
И выводится она стандартным системным методом при помощи атрибута title, без оформления код ссылки из всплывающей подсказкой выглядит так:
Ссылка
| Ссылка |
- Но как мы уже говорили изначально мы будем делать эти всплывающие подсказки более симпатичными ,и будем использовать код css, сегодня мы постараемся рассмотреть три варианта всплывающих подсказок.
- Так как, нет возможности в CSS простого оформления title, потому мы будем добавлять разные атрибуты, писать для них оформление и соответственно добавлять их в код нашей ссылки или изображения, для которого мы делаем красивую всплывающую подсказку.
- Вариант всплывающей подсказки первый, в нем мы будем добавлять подсказку на фотографию в самом низу при наведении указателя мыши.
- Для выполнения данного действия мы будем использовать два атрибута: image, И для того чтоб наша подсказка работала after и data-text для вывода текста всплывающей подсказки.
- Пример стилей CSS для данного варианта всплывающей подсказки:
.image {
display: inline-block;
position: relative;
}
.image:hover::after {
content: attr(data-text); /* Выводим текст всплывающей подсказки*/
position: absolute;
left: 0; right: 0; bottom: 0px; /* Положение всплывающей подсказки */
z-index: 1; /* Отображаем подсказку поверх других элементов */
background: rgba(0,255,102,0.6); /* Цвет (RGB) и степень его прозрачности */
color: #fff; /* Цвет текста */
text-align: center; /* Выравниваем текст по центру */
font-family: Arial, sans-serif; /* Гарнитура шрифта */
font-size: 11px; /* Размер текста подсказки */
padding: 5px 10px; /* Поля */
border: 1px solid #333; /* Параметры рамки */
}
| content: attr(data-text); /* Выводим текст всплывающей подсказки*/ left: 0; right: 0; bottom: 0px; /* Положение всплывающей подсказки */ z-index: 1; /* Отображаем подсказку поверх других элементов */ background: rgba(0,255,102,0.6); /* Цвет (RGB) и степень его прозрачности */ color: #fff; /* Цвет текста */ text-align: center; /* Выравниваем текст по центру */ font-family: Arial, sans-serif; /* Гарнитура шрифта */ font-size: 11px; /* Размер текста подсказки */ padding: 5px 10px; /* Поля */ border: 1px solid #333; /* Параметры рамки */ |
Ну и сам HTML код выглядит так:
А вот примерно такой результат у нас получится:
Но для ссылок такой вариант всплывающей подсказки не подойдет конечно же ,значить будем использовать немного другие методы вывода нашей подсказки. И в первом методе мы выведем всплывающую подсказку именно над нашей ссылкой.
Пример кода CSS Ниже:
.podskazka{
display: inline;
position: relative;
}
.podskazka:hover:after{
background: #333;
background: rgba(204,102,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: auto;
}
.podskazka:hover:before{ /* Добавляем стрелочку внизу блока всплывающей подсказки */
border: solid;
border-color: #cc6600 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: «»;
left: 50%;
position: absolute;
z-index: 99;
}
| background: rgba(204,102,0,.8);.podskazka:hover:before{ /* Добавляем стрелочку внизу блока всплывающей подсказки */ border-color: #cc6600 transparent; border-width: 6px 6px 0 6px; |
А для нашей ссылки с подсказкой делаем такой код:
Ссылка
| Ссылка |
Ну и результат у нас получится такой:
Наведи курсор сюда
- Ну и последний третий вариант — Выводить нашу всплывающую подсказку будем под ссылкой, в принципе он похож на предыдущий но немного другой дизайн и вывод под ссылкой.
- Пример CSS кода:
.tooltip {
position: relative; /* Делаем элемент родительским для всплывающих подсказок */
cursor: help;
}
.tooltip span {
position: absolute; /* Выводим элемент из потока */
margin-left: -30000px; /* И прячем далеко за краем экрана */
background-color: rgba(0,0,153,.8); /* Фон всплывающего блока*/
color: #fafafa; /* Цвет текста */
padding:10px; /* Отступы */
-webkit-border-radius: 5px; /* Закругляем уголки */
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.tooltip:hover span { /* При наведении */
margin-left: 0; /* Возвращаем из далекого заэкранного края блок на место */
width: 250px; /* Задаем ширину */
z-index: 1000; /* Помещаем на самый верх */
/* Позиционируем относительно родительского блока */
top:30px; /* Отступ сверху */
left:20px; /* Отступ слева */
}
.tooltip span:after{
content: ''; /* Добавили контент */
width:0; /* Спрятали его, превратив в 0 */
height:0;
border-bottom: 10px solid #000099; /* Нижним бордером задаем цвет и высоту треугольника */
border-right: 30px solid transparent; /* Правым — ширину треугольника вправо */
position: absolute; /* Позиционируем относительно родительского блока */
top:-10px;
left:10px;
}
| position: relative; /* Делаем элемент родительским для всплывающих подсказок */ position: absolute; /* Выводим элемент из потока */ margin-left: -30000px; /* И прячем далеко за краем экрана */ background-color: rgba(0,0,153,.8); /* Фон всплывающего блока*/ color: #fafafa; /* Цвет текста */ padding:10px; /* Отступы */ -webkit-border-radius: 5px; /* Закругляем уголки */ -khtml-border-radius: 5px;.tooltip:hover span { /* При наведении */ margin-left: 0; /* Возвращаем из далекого заэкранного края блок на место */ width: 250px; /* Задаем ширину */ z-index: 1000; /* Помещаем на самый верх */ /* Позиционируем относительно родительского блока */ top:30px; /* Отступ сверху */ left:20px; /* Отступ слева */ content: ''; /* Добавили контент */ width:0; /* Спрятали его, превратив в 0 */ border-bottom: 10px solid #000099; /* Нижним бордером задаем цвет и высоту треугольника */ border-right: 30px solid transparent; /* Правым — ширину треугольника вправо */ position: absolute; /* Позиционируем относительно родительского блока */ |
Ну и соответственно html-код для ссылки:
СсылкаТекст всплывающей подсказки
| СсылкаТекст всплывающей подсказки |
И результат у Вас должен будет получится как на примере ниже:
Наведи курсор сюдаТекст всплывающей подсказки
Вот мы и рассмотрели три варианта всплывающих подсказок,вроде ничего сложного но наши всплывающие подсказки уже имеют более красивый вид чем изначально, их конечно же в сети намного больше можно найти и это только малая часть примеров, по этому пробуйте и комментируйте.
Источник: https://web-stydia.com/sozdaem-vsplyvayushhie-podskazki-na-chis/
Как сделать чудесные, анимированные всплывающие подсказки с помощью CSS
Всплывающие подсказки — это отличный способ улучшить пользовательский интерфейс — UI, когда вашим пользователям нужно дополнительное описание для той причудливой иконки, или когда они хотят перестраховаться перед тем, как нажать на кнопку, ну или может быть заголовок для «пасхального яйца» который идёт вместе с изображением. Так давайте сделаем анимированные всплывающие подсказки прямо сейчас, используя не что иное как HTML и CSS.
Образец
Вот над чем мы собираемся работать:
Прежде чем прыгать в котёл, давайте взглянем на то, что мы собираемся сварганить. Наша цель — добавить всплывающую подсказку простым способом, поэтому мы сделаем это добавив атрибут tooltip:
visible text or icon, etc.
Замечание о доступности и возможностях
Если вы ищете всплывающие подсказки совместимые с 508-м разделом (стандарт, принятый в США, для создания веб-ресурсов для людей с ограниченными возможностями) или вам нужны более умные подсказки с обнаружением столкновения контейнеров и/или поддержкой HTML содержимого или обычного текста, существует множество решений, в которых для этих задач используются сторонние скрипты.
«JavaScript необходим для создания полностью доступных интерактивных компонентов» — Сара Суэйдан, Построение полнодоступной справочной подсказки… сложнее, чем я думала
В этом руководстве потребности в доступности особо не рассматриваются. Вы знаете своих пользователей и то, что им нужно, поэтому убедитесь что вы учили и уважаете их нужды.
Давайте определим чего следует ожидать
- JavaScript не требуется
- Мы будем использовать селектор атрибута (не название класса), используя встроенные возможности CSS.
- Будем использовать существующие DOM элементы (никакие новые элементы не потребуются в вашей разметке*)
- В примерах кодов не используются префиксы (поэтому если вам нужно, сами добавьте префикс для вашего браузера)
- Для переключения всплывающих подсказок будем использовать событие в наведении мыши — mouseover/hover
- Всплывающие подсказки поддерживают только простой текст (HTML, изображения и прочее не поддерживается)
- Лёгкая анимация при вызове всплывающих подсказок
Отлично! Давайте раскачаем эту лодку!
Ой, подождите! Есть сноска (*), давайте сначала договоримся об “дополнительная разметка не нужна”. Всё-таки это магия! Нашим всплывающим подсказкам действительно не нужны дополнительные DOM элементы, так как они сделаны полностью на псевдо-элементах (::before и ::after), которыми мы можем управлять с помощью CSS.
Если вы уже используете псевдоэлементы из другого набора стилей и хотите создать всплывающую подсказку для этого элемента, вам может потребоваться немного изменить структуру.
Никакой вечеринки без всплывающих подсказок!
Подождите. Господа! Ещё одна оговорка: CSS-позиционирование. Чтобы всплывающие подсказки функционировали должным образом, их родительский элемент (то, к чему мы прикрепляем подсказку) должен быть
- position: relative, или
- position: absolute, или
- position: fixed
По существу, что-либо кроме position: static — это режим позиционирования по умолчанию, назначенный практически на все элементы вашим браузером.
Всплывающие подсказки имеют абсолютное позиционирование и таким образом им нужно знать границы, в которых их абсолютность имеет место быть.
Указанное по умолчанию статическое позиционирование не имеет свои собственные границы и не даст вашим всплывающим подсказкам что-то, от чего можно оттолкнуться, поэтому подсказки будут использовать ближайший родительский элемент, у которого четко объявлена граница.
Вам нужно определить, какое позиционирование работает лучше, когда вы используйте подсказки. По этому руководству подразумевается, что родительский элемент настроен на position: relative. Если ваш интерфейс основывается на абсолютном позиционировании элементов, тогда могут потребоваться некоторые изменения (дополнительная разметка), чтобы навесить подсказку на этот элемент.
Ну что ж, запрыгиваем и понеслась!
Селектор атрибута: Быстрое напоминание
Большинство CSS правил написаны для использования по названию класса, например .this-thing, но в CSS есть несколько типов селекторов. Для наших чудесных подсказок мы будем использовать селектор атрибута/свойства — объявляется квадратными скобками.
[foo] {
background: rgba(0, 0, 0, 0.8);
color: #fff;
}
Когда браузер встречает что-то вроде этого:
Check it out!
он поймет, что нужно применить правила [foo], потому что в теге имеется атрибут названный foo. В этом случае, сам span будет полупрозрачного черного цвета с белым текстом.
HTML элементы имеют различные встроенные атрибуты, а также мы можем придумать свои собственные. Наподобие foo, или tooltip. По умолчанию, HTML не знает что он означает, но с помощью CSS мы можем подсказать HTML, что с этим делать.
Почему селекторы атрибутов?
Мы будем использовать селекторы атрибутов в первую очередь для разделения задач. Использование атрибутов вместо имён классов не дает нам никаких бонусных очков в этой битве; классы и атрибуты имеют одинаковое предназначение. Однако, используя атрибуты, мы можем держать наш контент в содержимом, поскольку атрибуты HTML могут иметь значения, в то время как имена классов не могут.
Рассмотрим в этом примере кода: имя класса .tooltip и атрибут [tooltip]. Имя класса является одним из значений атрибута [class], в то время, как атрибут tooltip имеет значение, а содержащее текст, который мы хотим отобразить.
lorem ipsum
lorem ipsum
Теперь добавляем Алхимию в подсказку
Наши подсказки будут использовать два атрибута:
- tooltip: содержит содержимое подсказки (строка простого текста)
- flow: не обязательно; позволяет нам управлять с тем, как раскрыть подсказку. Мы можем использовать много способов размещения, но мы рассмотрим 4 обычных направления:сверху, слева, справа, снизу.
Теперь давайте настроим основу для всех подсказок. Правила 1-5 пунктов применяются для всех подсказок, независимо от того какое направление flow мы им зададим. Пункты 6–7 имеют различия для значений flow.
1. Относительность
Это для родительского элемента подсказки. Давайте назначим позицию так, чтобы абсолютное расположение частей подсказки (псевдоэлементы ::before и ::after) находилось в контексте родительского элемента, а не в контексте страницы в целом или прародительского элемента, или какого-то другого внешнего элемента в дереве DOM.
[tooltip] {
position: relative;
}
2. Настало время для псевдо-элементов
Пришло время для выхода псевдоэлементов на сцену. Пока что, мы зададим общее свойство для обоих частей ::before и ::after. Свойство content — выполняет основную работу псевдо-элемента, и скоро мы до него доберемся.
[tooltip]::before,
[tooltip]::after {
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
display: none;
opacity: 0;
/* opinions */
text-transform: none;
font-size: .9em;
}
3. Dink
Я не знаю, какое отношение имеет к этому «dink, но я всегда называл это так. Эта маленькая, треугольная, заострённая часть, придающая подсказкам вид, как у пузыря с диалогом, указывающая туда, откуда оно появилось. Заметьте, что мы используем прозрачный цвет (transparent) для границы; мы добавим цвет позже, также как и зависимость подсказки от направления flow.
[tooltip]::before {
content: '';
z-index: 1001;
border: 5px solid transparent;
}
Это не опечатка, что значение свойства имеет пустую строку — content: '';. Нам там ничего не нужно, но нам нужно это свойство для работы псевдо-элемента.
Чтобы создать треугольник, мы задаем сплошную границу с некоторой толщиной для пустого прямоугольника (без содержимого), без ширины и высоты, и цвет будет только у одной стороны границы. Для получения дополнительной информации ознакомьтесь со следующим руководством:
-
- CSS
- Быстрый совет: Рисование и использование CSS треугольников
- Joren Van Hee/Йорен Ван Хи
4. Пузырики!
Мы добрались до сути. Заметьте что content: attr(tooltip) говорит, “Этот псевдо-элемент должен использовать значение атрибута tooltip в качестве контента.” Вот почему использование атрибутов вместо названия классов является отличным решением!
[tooltip]::after {
content: attr(tooltip); /* magic! */
z-index: 1000;
/* most of the rest of this is opinion */
font-family: Helvetica, sans-serif;
text-align: center;
/*
Let the content set the size of the tooltips
but this will also keep them from being obnoxious
*/
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* visible design of the tooltip bubbles */
padding: 1ch 1.5ch;
border-radius: .3ch;
box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
background: #333;
color: #fff;
}
Заметьте, что значения z-index присутствуют для обоих элементов и «dink», и пузырика. Это произвольные значения, но имейте в виду, что значения z-index являятся относительными. Разъяснение: значение z-index: 1001 внутри элемента с z-index: 3, означает, что элемент 1001 будет самым верхним элементом внутри этого контейнера с z-index: 3.
Свойство пузырика z-index должно быть как минимум на 1 меньше чем z-index у «dink». Если это значение такое же или выше чем у «dink», вы можете столкнуться с эффектом неравномерной цветовой окраски «dink», если вы применяете box-shadow для ваших подсказок.
Чтобы узнать подробнее о свойстве z-index, взгляните на следующее руководство:
-
- CSS
- То, что вы возможно не знаете о свойстве Z-Index
- Steven Bradley/Стивен Брэдли
5. Взаимодействие с действием
Наши подсказки активируются при наведении мыши на элемент с подсказкой… Почти.
[tooltip]:hover::before,
[tooltip]:hover::after {
display: block;
}
Если вы вернётесь нашему блоку со стилями на Шаге 2, вы должны увидеть, что мы использовали opacity: 0; наряду с display: none; для частей нашей подсказки. Мы сделали так, чтобы использовать эффекты анимации CSS, при отображении и скрытии подсказки.
Свойство display не может быть анимировано, а свойство opacity может! И напоследок мы займёмся анимацией. Если вас не интересуют анимированные подсказки, просто уберите opacity: 0; на Пункте 2 и не обращайте внимания на анимацию в Пункте 7.
Последнее, что нам нужно, все еще относится ко всем подсказкам — это способ подавить всплывающую подсказку, если у нее нет содержимого. Если вы заполняете всплывающие подсказки некоторой динамической системой (Vue.js, Angular, или React, PHP и т.д.), нам не нужны тупые пустые пузырьки!
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
display: none !important;
}
6. Управление направлением
Этот шаг может быть довольно сложным, поскольку мы будем использовать некоторые не столь распространенные селекторы, чтобы помочь нашим подсказкам определиться с их местами размещения на основе их flow значений (или их отсутствия).
«В Круге-K происходят странные вещи» — Тед Теодор Логан
Прежде чем перейти к стилям, давайте посмотрим на некоторые шаблоны селекторов, которые мы будем использовать.
[tooltip]:not([flow])::before,
[tooltip][flow^=»up»]::before {
/* …
properties: values
… */
}
Это говорит браузеру: «Для всех элементов с атрибутом tooltip, которые либо не имеют атрибута flow, либо имеют flow со значением, которое начинается с “наверх”: применить эти стили к своему псевдониму ::before.»
Мы используем шаблон, так что они могут быть распространены на другие flow без необходимости повторять CSS. Этот шаблон flow^=»up» использует сопоставитель ^= (начинается с).
Это позволяет стилям также применяться к up-right и up-left (вправо-вверх и влево-верх), вы можете захотеть использовать такие направления.
Мы не будем описывать их здесь, но вы можете увидеть, как они используются в моей оригинальной демонстрации всплывающей подсказки в CodePen.
Ниже перечислены блоки CSS для всех четырех направлений, рассматриваемых в этом уроке.
Наверх (по умолчанию):
/* ONLY the ::before */
[tooltip]:not([flow])::before,
[tooltip][flow^=»up»]::before {
bottom: 100%;
border-bottom-width: 0;
border-top-color: #333;
}
/* ONLY the ::after */
[tooltip]:not([flow])::after,
[tooltip][flow^=»up»]::after {
bottom: calc(100% + 5px);
}
/* Both ::before & ::after */
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^=»up»]::before,
[tooltip][flow^=»up»]::after {
left: 50%;
transform: translate(-50%, -.5em);
}
Вниз:
[tooltip][flow^=»down»]::before {
top: 100%;
border-top-width: 0;
border-bottom-color: #333;
}
[tooltip][flow^=»down»]::after {
top: calc(100% + 5px);
}
[tooltip][flow^=»down»]::before,
[tooltip][flow^=»down»]::after {
left: 50%;
transform: translate(-50%, .5em);
}
Влево:
[tooltip][flow^=»left»]::before {
top: 50%;
border-right-width: 0;
border-left-color: #333;
left: calc(0em — 5px);
transform: translate(-.5em, -50%);
}
[tooltip][flow^=»left»]::after {
top: 50%;
right: calc(100% + 5px);
transform: translate(-.5em, -50%);
}
Вправо:
[tooltip][flow^=»right»]::before {
top: 50%;
border-left-width: 0;
border-right-color: #333;
right: calc(0em — 5px);
transform: translate(.5em, -50%);
}
[tooltip][flow^=»right»]::after {
top: 50%;
left: calc(100% + 5px);
transform: translate(.5em, -50%);
}
7. Анимируем всё
Анимация просто потрясающая штука. Анимация может:
- помочь пользователям чувствовать себя комфортно
- помочь пользователям с пространственной ориентацией в вашем интерфейсе
- привлечь внимание к вещам, которые необходимо увидеть
- смягчить элементы интерфейса, которые в противном случае имели бы только резкий эффект вкл/выкл
Наши подсказки будут подпадать под это последнее описание. Вместо того, чтобы всплывать и мгновенно выскакивать, давайте сделаем нашим текстовым пузырям более легкий эффект.
@keyframes
Нам понадобятся два вида анимации @keyframe. Подсказки вверх/вниз будут использовать keyframe tooltips-vert, а подсказки влево/вправо будут использовать keyframe tooltips-horz.
Обратите внимание, что в обоих этих keyframe мы определяем только желаемое конечное состояние всплывающих подсказок. Нам не нужно знать, откуда они появляются (в подсказках есть информация о стиле).
Мы просто хотим управлять тем, куда они направляются.
@keyframes tooltips-vert {
to {
opacity: .9;
transform: translate(-50%, 0);
}
}
@keyframes tooltips-horz {
to {
opacity: .9;
transform: translate(0, -50%);
}
}
Теперь нам нужно применить эти keyframe к подсказкам, когда пользователь наводит курсор мыши на элементы с атрибутами [tooltip]. Поскольку мы используем различные направления для управления отображением всплывающих подсказок, нам необходимо определить эти возможности в стилях.
Используйте :hover, чтобы передать управление анимации
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^=»up»]:hover::before,
[tooltip][flow^=»up»]:hover::after,
[tooltip][flow^=»down»]:hover::before,
[tooltip][flow^=»down»]:hover::after {
animation:
tooltips-vert
300ms
ease-out
forwards;
}
[tooltip][flow^=»left»]:hover::before,
[tooltip][flow^=»left»]:hover::after,
[tooltip][flow^=»right»]:hover::before,
[tooltip][flow^=»right»]:hover::after {
animation:
tooltips-horz
300ms
ease-out
forwards;
}
Помните, что мы не можем анимировать свойство display, но мы можем дать всплывающим подсказкам эффект затухания, манипулируя opacity. Мы также анимируем свойство transform, которое придает подсказкам еле-заметное движение, как будто они вылетают, указывая на их теггированне элементы.
Обратите внимание на ключевое слово forwards в объявлении анимации. Это говорит анимации не сбрасываться после одного выполнения, а двигаться вперед и оставаться до конца.
Вывод
Фантастическая работа! Мы многое рассказали на этом уроке, и теперь у нас есть аккуратная коллекция всплывающих подсказок, показывающих нашу напряженную работу:
Мы лишь нацарапали поверхность того, что можно делать с помощью всплывающих подсказок CSS. Повеселитесь, поиграйте с ними, продолжайте экспериментировать и придумывайте свои собственные рецепты!
Ещё уроки по использованию CSS в Интерфейсах UI
Источник: https://webdesign.tutsplus.com/ru/tutorials/css-tooltip-magic—cms-28082
Загрузка...
