Вывод tooltip (всплывающей подсказки) в любом месте экрана


Содержание

ToolTip изменение вида всплывающей подсказки.

23.11.2007, 17:58

Непонятное изменение положения подсказки (ToolTip)
Доброго времени, форумчане. Выполняю следующее задание: Написал следующий обработчик для.

Изменение подсказки ToolTip контрола во время выполнения
Как изменить подсказку ToolTip для button1 во время выполнения программы?

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

Появление всплывающей подсказки при наведении на кнопку
Всем привет! 1) Как сделать что бы при наведении курсора на кнопку всплывала подсказка, вроде это.

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

Вывод Tooltip (всплывающей подсказки) в любом месте экрана.

Основы и тонкости Visual C++.
http://maxim.z.tripo. /visual_c1.html
ToolTip (всплывающая подсказка) — это всплывающее окошко типа pop-up, которое отображает текст. Служит для выведения информации при наведении курсора мышки на какой-нибудь элемент управления, на статический текст, к которому был привязан идентификатор из ресурсов, или просто на любую часть окна приложения.

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

Первоначально необходимо создать окно класса TOOLTIPS_CLASS, потом заполнить структуру TOOLINFO:

typedef struct tagTOOLINFO <
UINT cbSize;
UINT uFlags;
HWND hwnd;
UINT_PTR uId;
RECT rect;
HINSTANCE hinst;
LPTSTR lpszText;
#if (_WIN32_IE >= 0x0300)
LPARAM lParam;
#endif
>
TOOLINFO, NEAR *PTOOLINFO, FAR *LPTOOLINFO;

Определяем два параметра в этой структуре, которые имеют для нас значение uFlags и lpszText.

uFlags выбираем равным TTF_TRACK, что означает возможность использования посылки сообщений выбирающих позицию для ToolTip-a и видимость.
lpszText — задание текста, который мы хотим выводить.
Теперь мы посылаем сообщение в систему, о желании создать всплывающую подсказку, куда передаём ссылку на нашу структуру SendMessage(hwndTT, TTM_ADDTOOL, 0, (LPARAM) (LPTOOLINFO) &ti).

Затем посылаем сообщение TTM_TRACKPOSITION, которая задаёт координаты всплывающей подсказки SendMessage(hwndTT, TTM_TRACKPOSITION, 0, (LPARAM)(DWORD) MAKELONG(m_x, m_y)), где m_x и m_y координаты x и y на экране.

И в последнюю очередь посылаем сообщение о активизации всплывающей подсказки SendMessage(hwndTT, TTM_TRACKACTIVATE, true, (LPARAM)(LPTOOLINFO) &ti), где true параметр указывающий на отображение подсказки, при выборе false, подсказка будет скрыта.

Всплывающая подсказка, не выходящая за границы экрана

Вопрос

Что нужно сделать, дабы тултипы никогда не вылазили сверху, снизу, слева, справа? На экранах как телефонов, так и компьютеров?

Попытки решения

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

2 ответа 2

Спасибо ув-мым @Blacknife, @Geyan и @dimaua, что потратили своё время на ответ к данному вопросу. Возможно, их решения не уступают в качестве, однако решил остановить свой выбор на JQuery-плагине Tooltipster. Поставленную в вопросе задачу он решает.

Мини-обзор

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

Код примера

Tooltipster не выбрасывает тултипы за окно, не только когда они простейшие. В демонстрируемом примере появляются отличные друг от друга всплывающие подсказки при наведении курсора и клике на икону с персонализированным оформлением и установлено время, в течение которого будет виден тултип — http://codepen.io/Kristinita/pen/RGzVmK.

Демонстрация

  • Если текст всплывающей подсказки не помещается в одну строку, он переносится на следующую.
  • Когда места на стороне света не остаётся, тултип появляется на другой. Отображение настраивается параметром side , в примере я задал ему значения [‘bottom’, ‘top’, ‘right’, ‘left’] . Всплывающая подсказка по умолчанию будет снизу, если там нет места — сверху; когда недостаточно пространства как снизу, так и сверху — справа; ну и наконец, если ей некуда деться снизу, сверху и справа, она выведется слева.

За время съёмок ни одна всплывающая подсказка не выскочила за границу. В ещё более усложнённых моих реальных примерах с этим тоже порядок.

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

Всплывающая подсказка для Unity, которая может показывать какой-нибудь текст, если курсор наводится на UI объект, или другой объект с коллайдером и скриптом, содержащим текст подсказки. Делать Tooltip с фиксированной позицией и размерами, мы не станем, так как это достаточно просто. Наш вариант будет привязан к позиции курсора, в рамках конкретного объекта. Кроме всего прочего, визуально это будет не только текст с фоном, к этой конструкции приделаем еще и стрелку, позиция которой относительно фона, будет рассчитываться с учетом расположения в нижней или верхней части. Размер Tooltip-а по ширине имеет ограничения, а вот высота регулируется в зависимости от длины текста.

Сделаем шаблон. Добавляем на сцену Canvas и удаляем компонент Graphic Raycaster, так как нам не нужно взаимодействие курсора с Tooltip-ом. Теперь в Canvas добавим изображение для фона, назем его Box, просто обычный квадрат. Добавим стрелку Arrow, это спрайт треугольника, который по умолчанию повернут так, чтобы указывать вниз. Добавим текстовый UI под именем Text.

Делаем Text и Arrow — дочерними Box.

Устанавливаем пресеты Rect Transform.

Далее, на Canvas вешаем скрипт Tooltip:

Чтобы получать текстовую информацию с 3D или 2D, игровых объектов у которых есть свой коллайдер, на них нужно повесить скрипт TooltipText с соответствующем текстом подсказки:

Чтобы получать текст с UI объектов, вне зависимости от выбранного режима tooltipMode, на них нужно цеплять скрипт TooltipTextUI с несколько другим кодом, чем для обычных объектов:

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

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

Проблема с всплывающими подсказками

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

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

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

Метод с использованием HTML

Самый простой добавления всплывающих подсказок – атрибут title.

Посмотрите на пример, приведенный ниже.

Если вы хотите увидеть подсказку, просто наведите указатель мыши на ссылку. title — это глобальный атрибут, который можно добавлять к любому элементу HTML.

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

Метод с использованием CSS

Другой способ заключается в использовании CSS для отображения всплывающей подсказки. Он позволяет настраивать внешний вид подсказки и даже использовать изображения.

Вот HTML-код предыдущего примера.

Для реализации нового способа используется CSS-свойство content и псевдоэлемент :after.

Наведите курсор на ссылку, чтобы увидеть всплывающую подсказку в действии.

Этот способ отображения всплывающей подсказки использует большое количество различных функций: свойство content, псевдоэлемент ::after, positionfor::after и т. д. Но если пользователь применяет устаревший браузер, то всплывающая подсказка не будет отображаться корректно.

Илон Маск рекомендует:  Что такое код cpdf_setlinecap

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

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

Если веб-страница работает на основе HTML5, вы можете воспользоваться новыми пользовательскими атрибутами данными. Они позволяет реализовать подсказку в HTML-коде, а не в CSS. В этом случае подсказки являются контентом, а не стилем CSS.

Код примера на HTML5:

Демонстрация: всплывающая подсказка с использованием пользовательских атрибутов данных HTML5:

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

Объяснение примеров кода на CSS

Чтобы всплывающая подсказка появлялась рядом с элементом, над которым находится указатель мыши, я использовал несколько приемов. Я установил для исходного элемента относительное позиционирование (position: relative). Это делает его точкой отсчета для position: absolute дочернего псевдоэлемента.

Затем всплывающая подсказка помещается на 1.1em ниже ссылки. Это смещает ее чуть ниже слов, чтобы она не закрывала их. А также на 1em вправо, чтобы подсказка смещалась примерно на 1 символ в сторону.

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

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

Я также присвоил значение z-index 1, чтобы всплывающая подсказка отображалась над существующим содержимым.

Остальная часть CSS-кода предназначена для управления внешним видом всплывающей подсказки и включает в себя обычные свойства padding, border и width.

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

В примере на HTML5 создается пользовательский атрибут данных с именем «data-tooltip» и присваивается ему некоторый текст.

Затем текст вставляется в контент с помощью функции CSS attr(). Проще говоря, attr(data-tooltip) принимает значение атрибута data-tooltip и заменяет его текстом.

Вместо заключения

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

Данная публикация представляет собой перевод статьи « How to Add a Tooltip in HTML/CSS (No JavaScript Needed) » , подготовленной дружной командой проекта Интернет-технологии.ру

Hello-site.ru

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

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

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

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

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

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

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

Bootstrap – Tooltips (всплывающие подсказки)

В этой статье познакомимся с процессом создания подсказок посредством Bootstrap 3 и 4. Эти подсказки можно добавлять к любым HTML-элементам (изображениям, текстовым элементам, ссылкам и др.).

Что такое всплывающая подсказка (tooltip)?

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

Компонент Tooltip в Bootstrap 3 и 4 построен с помощью CSS и JavaScript.

Компонент Tooltips в Bootstrap 4 для позиционирования подсказок использует стороннюю библиотеку Popper.js . Это означает что файл этой библиотеки ( popper.js ) необходимо подключить перед bootstrap.js . Кроме этого варианта, можно ещё воспользоваться файлом bootstrap.bundle.min.js или bootstrap.bundle.js . Данный файл включает в себя bootstrap.js и popper.js .

При самостоятельной сборке JavaScript из исходных кодов Bootstrap 4, для работы компонента Tooltips необходимо кроме файла tooltips.js в проект ещё включить utils.js .

Тонкости использования компонента Tooltips

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

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

Укажите container: ‘body’ чтобы избежать проблем рендеринга этого компонента в более сложных компонентах (группы input, группы кнопок и др.). В Bootstrap 4 данное значение для параметра container установлено по умолчанию.

Отображение всплывающих подсказок на скрытых элементах не работает.

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

При вызове на гиперссылках, которые состоят из нескольких строк, всплывающие подсказки будут центрироваться. Используйте white-space: nowrap , на элементе a , чтобы отключить такое поведение.

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

Добавление подсказки к элементу

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

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

Чтобы было более просто выбрать все элементы на странице, для которых необходимо вызвать метод tooltip , к ним, например, можно добавить атрибут data-toggle=»tooltip» .

Подсказка для элемента, имеющего состояние disabled

Элементы с атрибутом disabled являются не интерактивными, т.е. они не могут находиться в состоянии focus, hover или click. Поэтому для того, чтобы добавить подсказку к такому элементу, его необходимо обернуть, например, с помощью div или span, и вызвать уже подсказку посредством этого элемента.

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

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


Имя Описание
animation Тип: boolean . Значение по умолчанию: true . Определяет необходимо ли появление и скрытие всплывающей подсказки выполнять с анимацией.
container Тип: string | element | false . Значение по умолчанию: false . Определяет элемент в который необходимо помещать код всплывающей подсказки.
Например, если указать этому параметру значение «body» , то код подсказки будет добавляться в конец элемента body . А если например, значение «#tooltip» , то в элемент, имеющий id , равный tooltip .
По умолчанию, Bootstrap 3 HTML-код tooltip помещает после элемента, который вызвал эту подсказку, а Bootstrap 4 — в конец элемента body .
delay Тип : number | object . Значение по умолчанию : 0 .
Устанавливает время задержки перед отображением и скрытием всплывающей подсказки в миллисекундах. Не применяется к параметру trigger со значением manual . При указании одного значения (числа), интервал задержки устанавливается одинаковым как перед отображением, так и перед скрытием. Для установки разного времени, значение параметра указывается в формате объекта. Например, delay: < show: 500, hide: 100 >. В этом случае пауза перед отображением будет 500 мс, а перед скрытием – 100 мс.
html Тип: boolean . Значение по умолчанию: false . Определяет можно ли в содержимом подсказки (tooltip) использовать HTML теги. Значение true данного параметра соответственно включает эту возможность, а false — отключает.
placement Тип: string | function . Значение по умолчанию: «top» . Этот параметр позволяет настроить расположение всплывающей подсказки относительно элемента. Для установки доступны следующие значения: «auto» , «top» , «bottom» , «left» , «right» . Значение auto предназначено для автоматического ориентирования подсказки.
Кроме вышеприведённых значений для определения положения подсказки можно использовать функцию . Она получает 2 аргумента. В качестве первого аргумента — DOM-узел всплывающей подсказки, а в качестве второго — DOM-элемент, вызвавший её. В контексте функции ключевое слово this указывает на экземпляр tooltip .
selector Тип: string | false . Значение по умолчанию: false .
Этот параметр предназначен для инициализации подсказок у элементов, которые будут создаваться динамически после загрузки страницы.
В качестве объекта, для которого необходимо вызвать данный метод ( tooltip ) нужно выбрать элемент, который всегда будет присутствовать на странице. В большинстве случаев, в качестве такого элемента выбирают document или body .
В качестве значения этого параметра необходимо указать селектор , на основе которого будет осуществляться фильтрация потомков, для которых необходимо инициализировать подсказку.
template Тип: string .
Значение по умолчанию: Этот параметр устанавливает HTML-код, который будет использоваться при создании всплывающей подсказки. Текст всплывающей подсказки будет вставлен в элемент с классом tooltip-inner . Элемент с классом arrow используется для создания треугольника у всплывающей подсказки. Обёрточный элемент подсказки должен иметь класс tooltip и атрибут role=»tooltip» .
title Тип : string | element | function . Значение по умолчанию : «».
Устанавливает значение подсказки по умолчанию , если атрибут title не указан. Если в качестве значения указана функция, то она будет вызвана со ссылкой на элемент, к которому прикреплена эта подсказка.
trigger Тип : string . Значение по умолчанию : «hover focus» .
Данный параметр определяет события , при которых подсказка будет запускаться. Для установки доступно 4 события: «click» (при клике), «hover» (при наведении), «focus» (при нахождении элемента в фокусе) и «manual» ( самостоятельное определение). Кроме этого возможно комбинирование событий. В этом случае они указываются через пробел.
Значение «manual» указывает, что всплывающая подсказка будет запускаться программно с помощью методов tooltip (‘show’) , tooltip (‘hide’) и tooltip (‘toggle’) . Это значение нельзя комбинировать с другими.
viewport Имеется только в Bootstrap 3.
Тип : string | object | function . Значение по умолчанию : < selector: 'body', padding: 0 >.
Устанавливает границы в пределах которых должна отображаться всплывающая подсказка. Примеры значений: viewport: ‘#viewport’ или < "selector": "#viewport", "padding": 0 >.
Если в качестве значения указана функция, то она вызывается с единственным аргументом, значение которого равно DOM-узлу, который вызвал всплывающую подсказку. В контексте функции ключевое слово this указывает на экземпляр tooltip.
offset Имеется только в Bootstrap 4.
Тип : number | string . Значение по умолчанию : 0 .
Этот параметр позволяет настроить смещение всплывающей подсказки относительно её цели. В качестве значения можно указать одно значение (Number или String) или несколько значений в виде String, разделенных запятой.
fallbackPlacement Имеется только в Bootstrap 4.
Тип : string | array . Значение по умолчанию : ‘flip’ .
Этот параметр определяет, как необходимо изменить положение всплывающей подсказки, когда она начинает перекрывать свой ссылочный элемент. Это может flip (флип), clockwise (по часовой стрелки), counterclockwise (против часовой стрелки) или массив, содержащий список допустимых мест размещения.
boundary Имеется только в Bootstrap 4.
Тип : string | element . Значение по умолчанию : ‘scrollParent’ .
Свойство boundary определяет как должно вести содержимое подсказки, если оно выходит за допустимые границы. В качестве значения можно использовать ‘viewport’, ‘window’, ‘scrollParent’, или ссылку на HTML-элемент (только JavaScript).

Настройка всплывающих подсказок с помощью JavaScript осуществляется следующим образом:

Пример настройки расположения всплывающих подсказок, как с помощью data-атрибута, так и посредством JavaScript:

Пример, в котором установка расположения подсказки осуществляется с помощью функции:

Ссылка, при нажатии на которую отображается всплывающая подсказка, которая в свою очередь тоже содержит ссылки (в примере используются параметры title, placement, trigger, html):

Всплывающая подсказка, содержащая изображение (в примере используются параметры title, html):

Изменения шаблона всплывающей подсказки осуществляется с помощью параметра template:

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

Методы плагина Tooltips

Методы плагина Tooltips приведены в таблице.

Имя Описание
.tooltip(options) Этот метод инициализирует для одного или множества выбранных элементов всплывающие подсказки с указанными параметрами.
.tooltip(‘show’) Метод, который включает отображение всплывающей подсказки у элемента.
.tooltip(‘hide’) Метод, который убирает отображение всплывающей подсказки у элемента.
.tooltip(‘toggle’) Этот метод переключает отображение подсказки у элемента. Т.е. если подсказка отображается у элемента, то убирает её. А если она не отображается, то включает её.
.tooltip(‘destroy’) Имеется только в Bootstrap 3. Этот метод убирает всплывающую подсказку у элемента и удаляет её.
.tooltip(‘enable’) Имеется только в Bootstrap 4. Этот метод включает возможность показа всплывающий подсказки у элемента. Всплывающие подсказки включены по умолчанию.
.tooltip(‘disable’) Имеется только в Bootstrap 4. Этот метод отключает возможность показа всплывающий подсказки у элемента. Для того чтобы снова включить возможность показа всплывающей подсказки у элемента, для него необходимо вызвать метод tooltip с параметром ‘enable’ или ‘toggleEnabled’.
.tooltip(‘toggleEnabled’) Имеется только в Bootstrap 4. Метод переключает возможность показа всплывающий подсказки у элемента.
.tooltip(‘update’) Имеется только в Bootstrap 4. Обновляет положение всплывающей подсказки у элемента.
.tooltip(‘dispose’) Имеется только в Bootstrap 4. Этот метод убирает всплывающую подсказку у элемента и удаляет её.

Пример использование методов для управления всплывающими подсказками (Bootstrap 3):

Пример использование методов для управления всплывающими подсказками (Bootstrap 4):

События плагина Tooltips

JS Tooltips генерирует для всплывающих подсказок пять событий.

Имя Описание
show.bs.tooltip Событие возникает после вызова метода show() .
shown.bs.tooltip Это событие генерируется, когда подсказка становится полностью видимой пользователю (после завершения CSS переходов).
hide.bs.tooltip Событие возникает после вызова метода hide() .
hidden.bs.tooltip Это событие генерируется, когда подсказка становится полностью скрытой от пользователя (после завершения CSS переходов).
inserted.bs.tooltip Это событие вызывается после события show.bs.tooltip, когда шаблон подсказки будет добавлен в DOM.

Пример работы с событиями (при возникновении события выведем имя события, и время когда оно произошло):

Как изменить цвет и ширину подсказки с помощью CSS

Изменить некоторые параметры подсказки можно посредством переопределения её CSS-свойств.

Например, изменим цвет подсказки и её максимальную ширину (Bootstrap 4):

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

WPF предлагает гибкую модель для (tooltip — желтые окошки, которые появляются при наведении указателя мыши на какой-то объект). Поскольку в WPF всплывающие подсказки относятся к элементам управления содержимым, в них можно поместить практически что угодно. Можно также настроить различные временные параметры, чтобы задать время, после которого подсказка появляется и исчезает.

Самый простой способ вывода всплывающих подсказок — отнюдь не непосредственное использование класса . Вместо этого достаточно просто определить свойство ToolTip нужного элемента. Свойство ToolTip определено в классе FramworkElement, поэтому оно доступно для любого элемента, которое может разместиться в окне WPF. Например, вот кнопка с простой всплывающей подсказкой:

Если навести на нее курсор, то в знакомом желтом окошке появится текст: «Подсказка!».

Если нужно не такое простое содержимое всплывающей подсказки (например, комбинация вложенных элементов), придется выделить свойство ToolTip в отдельный элемент. Ниже показан пример, в котором для кнопки задается свойство ToolTip с помощью более сложного вложенного содержимого:

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

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

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

В предыдущем примере было показано, как можно настроить содержимое всплывающей подсказки. А если нужно сконфигурировать ее другие параметры? На этот случай есть два варианта. Первый — явное определение объекта ToolTip. Это позволяет непосредственно задать разнообразные свойства ToolTip.

ToolTip является элементом управления содержимым, поэтому для него можно настроить стандартные свойства, такие как Background (чтобы сменить желтый фоновый цвет), Padding и Font. Можно также изменить свойства, определенные в классе ToolTip (они перечислены ниже). Большинство этих свойств предназначено для размещения подсказки точно в нужном месте.

HasDropShadow

Определяет, имеет ли окно подсказки размытую темную тень, которая «приподнимает» его над находящимся под ним окном

Placement

Определяет позицию подсказки с помощью одного из значений из перечисления PlacementMode. Значением по умолчанию является Mouse, которое означает, что верхний левый угол подсказки будет располагаться относительно текущей позиции указателя мыши. (Действительное положение подсказки может быть смещено от начальной точки с помощью свойств HorizontalOffset и VerticalOffset.)

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

HorizontalOffset, VerticalOffset

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

PlacementTarget

Позволяет позиционировать окно подсказки относительно другого элемента. Чтобы использовать это свойство, свойство Placement должно иметь одно из следующих значений: Left, Right, Тор или Bottom. (Это одна из границ элемента, по которой будет выравниваться подсказка.)

PlacementRectangle

Задает смещение окна подсказки. Работает почти так же, как и свойства HorizontalOffset и VerticalOffset. Это свойство не сработает, если свойство Placement имеет значение Mouse

CustomPopupPlacementCallback

Позволяет динамически позиционировать окно подсказки с помощью кода. Если свойство Placement имеет значение Custom, то это свойство определяет метод, вызываемый объектом ToolTip для получения местоположения подсказки. Метод обратного вызова получает три аргумента: popupSize (размер ToolTip), targetSize (размер PlacementTarget, если он используется) и offset (точка, которая создается на основе свойств HorizontalOffset и VerticalOffset). Этот метод возвращает объект CustomPopupPlacement, который сообщает WPF, где поместить окно подсказки

StaysOpen

Не имеет никакого практического эффекта. Это свойство предназначено для создания всплывающего окна подсказки, которое остается открытым до тех пор, пока пользователь не щелкнет еще где-нибудь. Однако его перекрывает свойство ToolTipService.ShowDuration StaysOpen. Поэтому всплывающие подсказки всегда исчезают по истечении заданного промежутка времени (обычно примерно 5 секунд) или при сдвиге указателя мыши. Если вы хотите создать окно в виде всплывающей подсказки, которое будет оставаться открытым неопределенно долго, то проще всего использовать элемент Popup

IsEnabled, IsOpen

Позволяют управлять поведением подсказки с помощью кода. Свойство IsEnabled позволяет временно отключить всплывающую подсказку, a IsOpen — программно отображать и скрывать подсказку (или просто проверять, открыто ли ее окно)

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

Привязка к текущей позиции указателя мыши

Это стандартный способ, когда свойству Placement присваивается значение Mouse. Левый верхний угол окна подсказки размещается в левом верхнему углу невидимого «прямоугольника» вокруг курсора.

Привязка к позиции элемента под указателем мыши

Свойству Placement присваивается значение Left, Right, Top, Bottom или Center — т.е. указывается край элемента, который нужно использовать для привязки. Левый верхний угол контекстного окна указателя будет выровнен по этому краю.

Приемка к позиции другого элемента (или окна)

Свойство Placement задается точно так же, как при выравнивании подсказки по текущему элементу (используются значения Left, Right, Тор или Center). Затем с помощью свойства PlacementTarget указывается базовый элемент. Не забывайте указать нужный элемент с помощью синтаксиса .

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

Использование абсолютных координат

Свойству Placement присваивается значение Absolute, а свойства HorizontalOffset и VerticalOffset (или PlacementRectangle) задают расстояние от окна подсказки до левого верхнего угла окна.

Расчет во время выполнения

Свойству Placement присваивается значение Custom. С помощью свойства CustomPopupPlacementCallback указывается созданный вами метод.

Анимированные всплывающие подсказки (tooltip) на CSS

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

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

Для начала разберем саму концепцию всплывающей подсказки. Основная задача — обеспечить простое добавление всплывающей подсказки, для этого мы создадим пользовательский атрибут tooltip:

  • Не требует JavaScript
  • Работает на селекторах атрибутов, а не на классах
  • Не нуждается в отдельных элементах DOM
  • Примеры кода поставляются без префиксов (вы можете добавить их в своих проектах)
  • Работает при наведении курсора
  • Поддерживает только текст (HTML, изображения и т.д. не поддерживаются)
  • Легкая анимация при вызове всплывающих подсказок

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

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

  • position: relative
  • position: absolute
  • position: fixed

Селекторы атрибутов. Быстрый взгляд

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

Пример элемента с атрибутом foo:

В результате span с атрибутом foo окрасится в белый цвет, с полупрозрачным черным фоном.

Почему именно селектор атрибутов?

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

Рассмотрим пример: класс .tooltip vs. атрибут [tooltip]. Имя класса является одним из значений атрибута class, атрибут tooltip имеет в качестве значения текст который мы будем отображать при наведении.

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

Наши всплывающие подсказки будут использовать два различных атрибута:

  • tooltip: Содержит текст подсказки
  • flow: опциональный атрибут, позволяет определить с какой стороны будет появляться всплывающая подсказка (сверху, снизу, слева, справа)

1. Позиционирование

Для родительского элемента установим относительное позиционирование:

2. Псевдо-элементы

Перейдем к псевдо-элементам ::before и ::after. Свойство content является обязательным для работы псевдо-элементов, но мы определим его позже.

3. Треугольник

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

Мы оставили значение свойства content пустым, так как нам не нужно добавлять каких-либо дополнительных элементов к подсказке.

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

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

Обратите внимание на свойство content: attr(tooltip). Этот псевдо-элемент должен использовать значение атрибута tooltip в качестве его содержания.

5. Взаимодействие

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

Как вы помните, на втором шаге, для всплывающей подсказки мы использовали два свойства opacity: 0 и display: none. Это для того чтобы мы могли добавить к ним анимацию для появление и скрытия подсказки.

Свойство display не может быть анимированно, но вместо этого мы можем анимировать свойство opacity. Если вы не хотите использовать анимацию, просто удалите свойство opacity: 0 из второго шага, и можете не переходить к шагу 7.

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

6. Настройка позиционирования всплывающей подсказки

Это довольно сложный шаг, так как мы будем использовать немного не стандартные селекторы для определения позиции появления подсказки.

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

Этом мы говорим браузеру «Для всех элементов с атрибутом tooltip, которые не имеют атрибут flow, или имеют атрибут flow со значением up и применяем эти стили для псевдо-элементов ::before«.

Вверх (по умолчанию)

Влево

Вправо

7. Анимация

Для анимации нам понадобятся два @keyframes. Всплывающие подсказки которые будут появляться вверх/вниз будут использовать keyframe tooltips-vert, а всплывающие подсказки которые появляются слева/справа будут использовать keyframe tooltips-horz. Обратите внимание, что во всех ключевых кадрах мы определяем только конечные состояния анимации.

Теперь нам нужно применить эту анимацию при наведении на элемент с атрибутом tooltip.

Вам требуются услуги или консультация специалиста по веб-разработке?

Всплывающая подсказка (tooltip) на CSS

В данном примере реализована отличная всплывающая подсказка (tooltip) на CSS.

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

Обзор

Проголосуйте за урок

Оценка

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

Илон Маск рекомендует:  Как сделать обтекание картинки текстом
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL