Tooltip c пример: ToolTip Класс (System.Windows.Forms) | Microsoft Learn

Тултипы (tooltips). Что это такое и как их проектировать — Дизайн на vc.ru

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

1833 просмотров

Привет, меня зовут Егор Камелев. Я занимаюсь проектированием интерфейсов с 2006 года. Сегодня хочу поделиться чек-листом вопросов, связанных с проектированием тултипов.

Тултипы чаще всего используются для следующих разъсянений:

Что обозначает та или иная иконка в интерфейсе?

Например, в WYSIWYG-панелях текстовых редакторов

Что же там, в обрезанном тексте?

Если название ролика на YouTube не умещается в две строки, то оно отображается в тултипе

Что это за непонятное число?

Пример из интерфейса Яндекс.

В приведённых примерах вряд ли удалось бы отказаться от тултипов без вреда для интерфейса. И это первый вопрос, которым я задаюсь во время проектирования: «Можно ли здесь обойтись без тултипа и не навредить пользователям?» Если можно, то лучше всё-таки не прятать важную информацию под тултип, а размещать её в виде текста рядом с нужным элементом.

Следующий вопрос звучит так: «Здесь точно нужен тултип, а не что-нибудь другое?» Возможно, подойдёт один из похожих элементов: поп-овер или модальное окно.

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

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

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

Модальное окно с перечнем тарифов в конструкторе посадочных страниц lp151.com

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

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

Например, важно ли пользователям видеть, что находится за тултипом, в момент его отображения? Если важно, то придётся размещать тултип рядом с элементом, а не поверх него.

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

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

• Через сколько миллисекунд после наведения тултип появляется?

• Через сколько исчезает после того, как с него снят фокус?

• Если два элемента стоят рядом и пользователь сместил фокус с одного на другой, как должны вести себя тултипы (например, тултипы меняются мгновенно, игнорируя правило задержки)?

• Нужна ли анимация плавного появления и исчезания? Если нужна, то какая и сколько она должна занимать по времени?

• Где должен появиться тултип относительно курсора мыши или элемента, на который навёлся пользователь?

• Где должен появиться тултип, если элемент, на который навёлся пользователь, находится слишком близко к краю экрана? Если использовать решение со стрелочками, торчащими из тултипа, то задача по проектированию и описанию логики размещения элементов серьёзно усложняется;

• Какая максимальная длина текста может быть в тултипе?

• Можно ли отображать тултип с пустым контентом (в Бутстрапе по умолчанию нельзя)?

• Можно ли показывать тултипы для скрытых элементов (в Бутстрапе по умолчанию нельзя)?

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

На этом UX-составляющая вопросов проектировщика заканчивается и можно приступать к UI. Здесь будут свои вопросы.

• Каким цветом отделить тултип от остального интерфейса (в Бутстрапе по умолчанию это белый текст на чёрном фоне)?

• Нужны ли дополнительные инструменты для такого отделения, помимо цвета подложки? Прозрачность тултипа, обводка контейнера, отбрасывание тени?

• Не нагородил ли я нового стиля там, где можно было использовать существующий?

• Какой будет максимальная ширина контента до переноса строки и почему?

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

Какой бы цвет подолжки тултипа ни выбрал дизайнер lp151.com, всё равно возникнет ситуация, когда подсказка сольётся с цветом фона. Поэтому разумно использовать дополнительные способы отделения элементов друг от друга

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

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

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

Так выглядит один из примеров тултипа в дизайн-системе lp151.

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

• Скрин-ридерам доступен контент тултипов и они в состоянии его воспроизвести;

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

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

Элемент ToolTip. Язык программирования С# 2005 и платформа .NET 2.0. [3-е издание]

ВикиЧтение

Язык программирования С# 2005 и платформа .NET 2.0. [3-е издание]
Троелсен Эндрю

Содержание

Элемент ToolTip

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

Для примера добавьте такую подсказку для календаря CarConfig. Сначала перетащите новый элемент управления ToolTip из панели инструментов в окно проектирования формы и переименуйте этот элемент управления в calendarTip. Внешний вид элемента ToolTip можно задать, используя окно свойств, например.

private void InitializeComponent () {

 …

 // calendarTip

 //

 this.calendarTip.isBalloon = true;

 this.calendarTip.ShowAlways = true;

 this.calendarTip.ToolTipIcon = System.Windows.Forms.ToolTipIcon.Info;

 …

}

Чтобы связать ToolTip с данным элементом управления, выберите элемент управления, в котором должен активизироваться ToolTip, и соответствующим образом установите свойство ToolTip on (рис. 21.15).

Рис. 21.15. Ассоциация ToolTip с элементом управления

Теперь наш проект CarConfig можно считать завершенным. На рис. 21.16 созданная подсказка показана в действии.

Рис. 21.16. Элемент ToolTip в действии

Исходный код. Проект CarConfig размещен в подкаталоге, соответствующем главе 21.

Элемент

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

Элемент

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

Элемент <xsl:if>

Элемент &lt;xsl:if&gt; При помощи элемента &lt;xsl:if&gt; осуществляются проверки условия и принимаются действия на основе результата проверки. Он во многом похож на оператор if в языках программирования. У элемента &lt;xsl:if&gt; один атрибут:• test (обязательный). Устанавливается в

Элемент <xsl:for-each>

Элемент &lt;xsl:for-each&gt; Элемент &lt;xsl:for-each&gt; позволяет применять тело шаблона в цикле снова и снова для всех элементов набора узлов. С технической точки зрения, он работает с набором узлов, который возвращает выражение XPath и выполняет одно и то же действие с каждым узлом в

Элемент <?job?>

Элемент &lt;?job?&gt; Элемент &lt;?job?&gt; задает режим отладки при выполнении WS-файла. Если значение атрибута debug равно true, то задание может быть выполнено во внешнем отладчике (см. приложение 3). Если же значение атрибута debug равно false, то отладчик для этого задания применен быть не

Элемент <job>

Элемент &lt;job&gt; Элементы &lt;job&gt; позволяют определять несколько заданий (независимо выполняющихся частей) в одном WS-файле. Иначе говоря, между тегами &lt;job&gt; и &lt;/job&gt; будет находиться отдельный сценарий (который, в свою очередь, может состоять из нескольких частей,

Элемент <example>

Элемент &lt;example&gt; Внутри элемента &lt;example&gt; приводится текст из одной или нескольких строк, в котором можно описать примеры запуска сценария. Если сценарий был запущен с ключом /? в командной строке или в сценарии встретился вызов метода ShowUsage объекта WshArguments, то этот текст

Элемент Form

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

Элемент Button

Элемент Button Для создания обычной кнопки используется класс System. Windows.Forms.Button. Эта кнопка обладает всеми основными функциями, которые есть у такого же класса в полной версии .NET Framework. Кнопка предназначена для обработки нажатия стилуса на соответствующую область экрана. В

Элемент TextBox

Элемент TextBox В предыдущем примере дата отображалась в текстовом поле. Это поле создается при помощи класса TextBox, который позволяет вводить текст. Данный элемент поддерживает такие стандартные свойства, как BackColor и ForeColor. Событие Click элементом TextBox не поддерживается, но

Элемент ProgressBar

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

Элемент xsl:if

Элемент xsl:if Синтаксис элемента следующий:&lt;xsl:if test=»выражение»&gt; &lt;!— Содержимое: шаблон —&gt;&lt;/xsl:if&gt;Элемент xsl:if является простейшим условным оператором в XSLT. Выражение, содержащееся в обязательном атрибуте test, вычисляется и приводится к булевому типу. В том и только том

Подсказки · Начальная загрузка

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

Обзор

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

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

Все понял? Отлично, давайте посмотрим, как они работают, на нескольких примерах.

Пример: включить всплывающие подсказки везде

Один из способов инициализировать все всплывающие подсказки на странице — выбрать их по атрибуту data-toggle :

 $(функция () {
  $('[data-toggle="tooltip"]').tooltip()
}) 

Примеры

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

Узкие штаны следующего уровня куфии вы, наверное, не слышали о них. Фотобудка с бородой из необработанного денима, высокой печатью, веганская сумка через плечо, Stumptown. Сейтан от фермы к столу, 8-битная американская одежда McSweeney’s Fixie из устойчивой лебеды имеет виниловое шамбре Terry Richardson. Бородатый тупиковый город, кардиганы банх ми ломо тандеркэтс. Биодизель с тофу Уильямсбург Марфа, очищающий веганский шамбре четырех локо Максуини. По-настоящему ироничный ремесленник, какой бы кейтар ни был, сценастер, от фермы до стола, Бэнкси Остин, твиттер, ручка, фриган, кредо, сырой деним, вирусный кофе одного происхождения.

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

 
  Подсказка вверху


  Подсказка справа


  Подсказка внизу


  Подсказка слева
 

И с добавлением пользовательского HTML:

 
  Подсказка с HTML
 

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

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

Активировать всплывающую подсказку через JavaScript:

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

Переполнение

 $('#example').tooltip({ border: 'window' }) 

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


  <дел>
  <дел>
    Какой-то текст всплывающей подсказки!
  
 

Отключенные элементы

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

или , в идеале сфокусируемой на клавиатуре с помощью tabindex="0" , и переопределить событий указателя на отключенный элемент.

 
  Кнопка отключена
 

Опции

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

Обратите внимание, что по соображениям безопасности параметры sanitize , sanitizeFn и whiteList не могут быть предоставлены с использованием атрибутов данных.

Имя	Тип	По умолчанию	Описание
анимация	логическое значение	правда	Применить переход затухания CSS к всплывающей подсказке
контейнер	строка | элемент | ложь	ложь	Добавляет всплывающую подсказку к определенному элементу. Пример: контейнер : 'тело' . Этот параметр особенно удобен тем, что позволяет расположить всплывающую подсказку в потоке документа рядом с активирующим элементом, что предотвратит всплывающую подсказку от триггерного элемента во время изменения размера окна.
задержка	номер | объект	0	Задержка отображения и скрытия всплывающей подсказки (мс) — не относится к ручному типу триггера Если указано число, применяется задержка как для скрытия, так и для отображения Структура объекта: задержка: { "показать": 500, "скрыть": 100}
HTML	логическое значение	ложь	Разрешить HTML во всплывающей подсказке. Если задано значение true, теги HTML в заголовке всплывающей подсказки будут отображаться во всплывающей подсказке. Если false, метод jQuery text будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
размещение	строка | функция	‘верхний’	Как расположить всплывающую подсказку — авто | топ | дно | слева | верно. Если указано auto , подсказка будет динамически переориентироваться. Когда функция используется для определения размещения, она вызывается с узлом DOM всплывающей подсказки в качестве первого аргумента и узлом DOM триггерного элемента в качестве второго. Контекст this установлен на экземпляр всплывающей подсказки.
селектор	строка | ложь	ложь	Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM ( jQuery. на поддержке ). См. это и информативный пример.
шаблон	строка	' '	Базовый HTML для использования при создании всплывающей подсказки. Заголовок всплывающей подсказки будет вставлен в .tooltip-inner . .arrow станет стрелкой всплывающей подсказки. Самый внешний элемент оболочки должен иметь класс .tooltip и role="tooltip" .
Название	строка | элемент | функция	''	Значение заголовка по умолчанию, если атрибут title отсутствует. Если задана функция, она будет вызываться со своей этой ссылкой , установленной на элемент, к которому прикреплена всплывающая подсказка.
триггер	строка	'наведение фокуса'	Как срабатывает всплывающая подсказка - нажмите | парить | фокус | руководство. Вы можете передать несколько триггеров; разделяйте их пробелом. 'manual' указывает, что всплывающая подсказка будет запускаться программно с помощью методов .tooltip('show') , .tooltip('hide') и .tooltip('toggle') ; это значение нельзя комбинировать ни с каким другим триггером. 'hover' сам по себе приведет к всплывающим подсказкам, которые нельзя активировать с помощью клавиатуры, и их следует использовать только в том случае, если существуют альтернативные методы передачи той же информации для пользователей клавиатуры.
смещение	номер | строка | функция	0	Смещение всплывающей подсказки относительно цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с той же структурой. Узел триггерного элемента DOM передается в качестве второго аргумента. Для получения дополнительной информации см. документацию по смещению Popper.js.
резервное размещение	строка | массив	'флип'	Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см. Документы о поведении Popper.js
граница	строка | элемент	'родительский прокрутки'	Граница ограничения переполнения всплывающей подсказки. Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылка HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации по предотвращению переполнения Popper.js.
дезинфекция	логическое значение	правда	Включить или отключить очистку. При активации «шаблон» и «заголовок» параметры будут очищены.
белый список	объект	Значение по умолчанию	Объект, который содержит разрешенные атрибуты и теги
санитарная обработкаFn	ноль | функция	ноль	Здесь вы можете указать свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать выделенную библиотеку для выполнения очистки.

Методы

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

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

Дополнительные сведения см. в нашей документации по JavaScript.

$(). Подсказка (параметры)

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

.тултип('показать')

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

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

.tooltip('hide')

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

 $('#element').tooltip('скрыть') 

.tooltip('переключить')

Переключает всплывающую подсказку элемента. Возвращает вызывающему объекту до того, как всплывающая подсказка была фактически показана или скрыта (т. е. до того, как произойдет событие visible.bs.tooltip или hidden.bs.tooltip ). Это считается «ручным» срабатыванием всплывающей подсказки.

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

.tooltip('dispose')

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

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

. tooltip('enable')

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

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

.tooltip('disable')

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

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

.tooltip('toggleEnabled')

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

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

.tooltip('update')

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

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

События

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

 $('#myTooltip').on('hidden.bs.tooltip', функция () {
  // сделай что-нибудь...
}) 

25 Управление всплывающими подсказками | Интерактивная веб-визуализация данных с помощью R, plotly и shining

25.

1 plot_ly() всплывающие подсказки

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

Атрибут hoverinfo управляет тем, какие другие атрибуты графика отображаются в тексте всплывающей подсказки. Значение по умолчанию hoverinfo — это x+y+text+name (вы можете проверить это с помощью schema() ), что означает, что plotly.js будет использовать соответствующие значения x , y , text и имя для заполнения текста всплывающей подсказки. Как показано на рис. 25.1, вы можете предоставить пользовательский текст (без других «вычисляемых значений»), указав строку символов text и установив hoverinfo = «text» . Строка символов может включать глифы, символы Юникода, некоторые (из белого списка) объекты HTML и теги. ⁴³ По крайней мере, в настоящее время plotly.js не поддерживает рендеринг LaTeX или изображений во всплывающей подсказке, но, как показано на рис. 21.3, если вы немного знаете HTML/JavaScript, вы всегда можете создать свою собственную всплывающую подсказку.

 библиотека (таблица)
библиотека (форкаты)
tooltip_data <- табличка(
  х = "",
  у = 1,
  категории = as_factor(c(
    «Глифы», «HTML-теги», «Юникод»,
    "HTML-сущности", "Комбинация"
  ))
  текст = с(
    "👋 глифы ಠ_ಠ",
    "Привет 1⁄2
    доля",
    "\U0001f44b юникод \U00AE \U00B6 \U00BF",
    "μ ± & < >   × ± °",
    paste("Вау много вариантов", emo::ji("dog2"))
)
plot_ly (tooltip_data, hoverinfo = "текст") %>%
  add_bars(
    х = ~ х,
    у = ~у,
    цвет = ~fct_rev(категории),
    текст = ~ текст
  ) %>%
  макет(
    бармод = "стек",
    режим наведения = "х"
  ) 

РИСУНОК 25. 1: Настройка всплывающей подсказки путем предоставления глифов, Unicode, разметки HTML для атрибутов text и ограничения отображаемых атрибутов с помощью hoverinfo='text' .

Всякий раз, когда требуется заливка (например, add_sf() , add_polygons() , add_ribbons() и т. д.), у вас есть возможность использовать атрибут hoveron для создания всплывающей подсказки. предоставленные точки данных, заполненный многоугольник, который определяют эти точки, или и то, и другое. Как показано на рис. 25.2, если вы хотите, чтобы всплывающая подсказка была прикреплена к заливке, вам, вероятно, понадобится текст должен иметь длину 1 для данной трассы. С другой стороны, если вы хотите, чтобы каждая точка вдоль заливки имела всплывающую подсказку, вы, вероятно, захотите, чтобы текст имел множество строк.

 р <- plot_ly(
  х = с (1, 2, 3),
  у = с(1, 2, 1),
  заполнить = "себя",
  режим = "маркеры+линии",
  hoverinfo = "текст"
)
подсюжет (
  add_trace(p, text = "треугольник", hoveron = "заполняет"),
  add_trace(p, text = paste0("точка", 1:3), hoveron = "точки")
) 

РИСУНОК 25. 2: Использование hoveron , чтобы указать, прикреплена ли всплывающая подсказка к заливке или к каждой точке вдоль этой заливки.

Вы не можете предоставить пользовательский текст таким образом для статистической агрегации, но есть способы управлять форматированием значений, вычисляемых и отображаемых plotly.js (например, x , y и z ). Если значение, которое вы хотите отформатировать, соответствует оси, вы можете использовать *axis.hoverformat . Синтаксис hoverformat следует соглашениям о формате d3js. Для чисел см.: https://github.com/d3/d3-format/blob/master/README.md#locale_format, а для дат см.: https://github.com/d3/d3-time-format/blob. /master/README.md#locale_format

 набор семян (1000)
plot_ly(x = rnorm(100), имя = "") %>%
  add_boxplot(hoverinfo = "x") %>%
  макет (ось x = список (формат наведения = ".2f")) 

РИСУНОК 25.3: Использование xaxis.hoverformat для округления агрегированных значений, отображаемых во всплывающей подсказке, до двух знаков после запятой.

Вычисленные значения, не имеющие соответствующей оси, скорее всего, имеют атрибут трассировки *hoverformat . Вероятно, наиболее распространенным примером является атрибут z в тепловой карте 9.0011 или гистограмма2d диаграмма. На рис. 25.4 показано, как отформатировать значения z так, чтобы они содержали один десятичный знак.

 plot_ly(z = ~вулкан) %>%
  add_heatmap(zhoverformat = ".1f") %>%
  макет (ось x = список (формат наведения = ".2f")) 

РИСУНОК 25.4: Форматирование отображаемых значений z на тепловой карте с использованием zhoverformat .

По общему признанию, трудно вспомнить, где указать эти атрибуты hoverformat , поэтому, если вам нужна комбинация пользовательского текста и форматирования вычисляемых значений, вы можете использовать hovertemplate , который переопределяет hoverinfo и позволяет полностью указать всплывающую подсказку в одном атрибуте. Это делается с помощью специальных правил разметки для вставки и форматирования значений данных внутри строки. На рис. 25.5 показан пример вставки x и y во всплывающую подсказку с помощью специальной разметки %{variable:format} , а также настройки вторичного блока с помощью тега . Полное описание этого атрибута, включая правила форматирования, см. на странице https://plot.ly/r/reference/#scatter-hovertemplate.

 набор семян(10)
plot_ly(x = rnorm(100, 0, 1e5)) %>%
  add_histogram(
    гистнорм = "плотность",
    hovertemplate = "Высота между 
 (%{x}) 
 составляет %{y:.1e}
    Это мало!"
  ) 

РИСУНОК 25.5: Использование атрибута hovertemplate для ссылки на вычисляемые переменные и формат их отображения внутри пользовательской строки.

Если вам нужен действительно конкретный контроль над всплывающей подсказкой, вы можете вообще скрыть всплывающую подсказку (используя hoverinfo='none' ) и определение собственной всплывающей подсказки. Однако для определения собственной всплывающей подсказки потребуются знания HTML и JavaScript — на рис. 21.3 показан пример того, как отображать изображение при наведении вместо всплывающей подсказки.

25.2

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

Подобно тому, как вы можете использовать атрибут text для предоставления пользовательской строки в plot_ly() (см. ggplot2 график, как показано в 25.6:

 p <- ggplot(mtcars, aes(wt, mpg, text = row.names(mtcars))) +
  геометрическая_точка()
ggplotly(p) 

РИСУНОК 25.6: Использование эстетики text ggplot2 для добавления пользовательского текста всплывающей подсказки к диаграмме рассеяния.

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

 ggplotly(p, tooltip = " текст") 

РИСУНОК 25.7: Использование аргумента всплывающей подсказки в ggplotly() для отображения только эстетики текста .

При построении отображаемого текста ggplotly() запускает format() для вычисленных значений. Поскольку некоторыми параметрами функции format() можно управлять через глобальные options() , вы можете использовать эти options() для управления отображаемым текстом. Сюда входит опция цифр для управления количеством значащих цифр, используемых для числовых значений, а также scipen за установление штрафа за определение того, используется ли для отображения научная или фиксированная нотация. На рис. 25.8 показано, как вы можете временно установить эти параметры (т. е. избежать изменения глобальной среды) с помощью пакета withr (Hester et al. 2018).

 библиотека(с)
p <- ggplot(верный, aes(ожидание, извержение)) +
    geom_raster (aes (заливка = плотность))
подсюжет (
  with_options (список (цифры = 1), ggplotly (p)),
  with_options (список (цифры = 6, scipen = 20), ggplotly (p))
) 

РИСУНОК 25. 8: Использование глобальных параметров R для управления отображаемыми значениями во всплывающей подсказке ggplotly() .

Эти глобальные параметры хороши для указания значимых/научных обозначений, но как насчет более сложного форматирования? Иногда разумное использование эстетики текста обеспечивает достаточный обходной путь. В частности, как показано на рис. 25.9, если нужно управлять отображаемым эстетическим значением (например, y ), можно сгенерировать пользовательскую строку из этой переменной и передать ее в 9.0010 text , затем замените text на y во всплывающей подсказке:

 библиотека (весы)
p <- ggplot(txhousing, aes(дата, медиана)) +
  geom_line (аес (
    группа = город,
    текст = вставить («медиана:», number_si (медиана))
  ))
ggplotly(p, всплывающая подсказка = c("текст", "x", "город")) 

РИСУНОК 25.9: Использование эстетики text для замены автоматически сгенерированной эстетики ( y ).

Подход, изображенный на рис. 25.9, работает для вычисляемых значений, относящихся к необработанным значениям данных, но как насчет сложного форматирования сводной статистики, сгенерированной 9?0020 ggplot2 ? В этом случае вам придется использовать возвращаемое значение ggplotly() , которое, как вы помните, представляет собой объект plotly , соответствующий спецификации plotly.js. Это означает, что вы можете идентифицировать атрибут(ы) трассировки, которые содержат соответствующую информацию (примечание : функция plotly_json() невероятно помогает найти эту информацию), а затем использовать эту информацию для заполнения атрибута text . На рис. 25.10 эта техника применяется для настройки текста, который появляется при наведении курсора на цифру 9.0010 geom_smooth() строк.

 # Добавляем сглаживание к предыдущему рисунку и конвертируем в график
w <- ggplotly (p + geom_smooth (se = FALSE))
# Этот сюжетный объект имеет две трассировки: одну для
# необработанный временной ряд и один для гладкого. 
# Попробуйте использовать `plotly_json(w)` для подтверждения второго
# трассировка — гладкая линия.
длина (w$x$данные)
# используем атрибут `y` гладкой линии
# для создания пользовательской строки (чтобы она отображалась во всплывающей подсказке)
text_y <- number_si(
  w$x$данные[[2]]$y,
  префикс = "Типичная средняя цена дома: $"
)
# скрыть всплывающую подсказку в необработанном временном ряду
# и добавить пользовательский текст в гладкую линию
ш %>%
  стиль (hoverinfo = "пропустить", трассировки = 1) %>%
  стиль (текст = text_y, трассировка = 2) 

РИСУНОК 25.10: Использование возвращаемого значения ggplotly() для заполнения пользовательского атрибута text .

25.3 Стиль

В настоящее время существует один основной атрибут для управления стилем всплывающей подсказки: hoverlabel . С помощью этого атрибута в настоящее время вы можете установить цвет фона ( bgcolor ), цвет границы ( bordercolor ) и семейство/размер/цвет шрифта. На рис. 25.11 показано, как использовать его с plot_ly() (по сути, любой используемый вами тип диаграммы должен его поддерживать):

 шрифт <- список(
  семья = "Roboto Condensed",
  размер = 15,
  цвет = "белый"
)
метка <- список(
  bgcolor = "# 232F34",
  цвет границы = "прозрачный",
  шрифт = шрифт
)
plot_ly(x = iris$Petal.Length, hoverlabel = label) 

РИСУНОК 25.11: Использование атрибута hoverlabel для настройки цвета и шрифта всплывающей подсказки.

С другой стороны, при использовании ggplotly() вам необходимо изменить атрибут hoverlabel с помощью style() , как показано на рис. 25.12

 qplot(x = длина лепестка, данные = радужная оболочка) %>%
  ggplotly() %>%
  стиль (hoverlabel = метка, marker.color = "# 232F34") %>%
  макет (шрифт = шрифт) 

РИСУНОК 25.12: Использование атрибута hoverlabel с ggplotly() .

Как показано в разделах 25.