C всплывающие подсказки: Общие сведения о всплывающих подсказках — WPF .NET Framework

Leave a Comment / Разное / By /

Всплывающие подсказки в программе для заметок FAQ.Net или навигация по RTF-документам, не изменяя сами документы / Хабр

Введение

Часто, навигация по документам в приложениях для заметок сделана в виде ссылок (Link), которые пользователь создает вручную в каждом документе. А что если сделать навигацию по ключевым словам, без применения уникальных ссылок в документе?

Задача, что я себе поставил при совершенствовании функционала программы FAQ.Net, состояла в создании удобного механизма навигации по RTF-документам в приложении FAQ.Net.

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

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



Способы создания навигации в RTF-документах, используя стандартный компонент RichTextBox


  1. Использование закладок (bookmarks).
    В стандарте RTF, есть встроенный механизм закладок, но стандартный компонент RichTextBox не поддерживает работу элементов bkmkstart и bkmkend.
  2. Отключить свойство DetectUrls и создавать свои ссылки.
    Этот способ описан в статье Links with arbitrary text in a RichTextBox. В этом случае необходимо дописывать код по определению URL-адресов и восстановлению всех ссылок при открытии RTF-документа. Посчитал, что это трудозатратно и немного снизит скорость работы приложения.
  3. Всплывающие подсказки.
    После двух, описанных выше, способов прочитал статью о всплывающих подсказках в компоненте RichTextBox [WinForms] RichTextBox ToolTip like Visual-Studio’s. Этот вариант был взят за основу.

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

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

Готового решения в просторах необъятного интернета не лежало, поэтому разрабатывал код своими руками.

Список задач, которые нужно выполнить:

  1. организовать хранение ключевых слов (подсказок) со ссылками
  2. реализовать функцию определения слова при наведении на него курсора
  3. создать интерфейс для создания и редактирования «словаря подсказок» (описание см.ниже)
  4. создать возможность быстрого создания ключевых слов в RTF-документе, используя «словарь подсказок»
  5. функционал всплывающих подсказок должен быть расширяемым

Подробности по пунктам


  1. Ключевые слова хранятся внутри БД SQLite. Скрипт создания таблицы:
    CREATE TABLE word_tooltip (
  id_content INTEGER NOT NULL,   /* Если id_content=0, то это общая всплывающая подсказка */
  word VARCHAR NOT NULL,         /* Слово, на которое выводится подсказка */
  tooltip_type INTEGER NOT NULL, /* Тип всплывающей подсказки: 0 - со ссылкой на внутренний документ, 1 - со ссылкой на интернет-ресурс, 2 - статическая подсказка */
  comment VARCHAR NOT NULL,      /* Текст подсказки */
  url_adr VARCHAR NULL,          /* URL-адрес */
  group_name VARCHAR NULL,       /* Имя группы в котором хранится слово */
  fore_color VARCHAR NULL,       /* Цвет шрифта */
  create_date DATETIME DEFAULT (CURRENT_TIMESTAMP),
  modif_date DATETIME,
  PRIMARY KEY (id_content, word)
  )
  2. функция определения слова при наведении на него курсора выполнена с помощью стандартных функций компонента RichTextBox: GetPositionFromCharIndex и GetCharIndexFromPosition. ‘,'(‘,’)’,'[‘,’]’,'{‘,’}’,’°’,’&’,’|’,’ ‘,’\n’,'»‘,’\t’
  3. «словарь подсказок» — так я назвал панель, в которой отображаются и редактируются все слова, созданные пользователем, на которые нужно отображать подсказки при наведении курсора внутри RTF-документа. Панель «Словарь подсказок» состоит из:
    — кнопок управления: создать, редактировать, копировать и удалить.
    — панели поиска
    — панели слов в виде дерева (TreeView)
    — панели редактирования
  4. Создание слов в «словаре подсказок» выполняется по нажатию клавиш Ctrl+Space. Если установить курсор на середину слова, то при вызове Ctrl+Space будет автоматически выставлен фильтр слов в словаре подсказок по началу слова до курсора, а при выборе слова (клавишей Enter или двойным щелчком мыши) все слово заменяется на выбранное. По мере нажатия букв на клавиатуре, пользователю отображается слово-фильтр вверху компонента выбора слова. Для удобства работы со словарем при наведении мыши на слово внутри отфильтрованного списка отображается подсказка.


  5. расширение функционала всплывающих подсказок заложено в поле tooltip_type INTEGER NOT NULL. Типы всплывающих подсказок:
    • со ссылкой на заметку (внутренний RTF-документ). Указывается только ID заметки (вопроса). При наведении на слово, в качестве подсказки отображается наименование заметки.
    • со ссылкой на интернет-ресурс. Указывается URL-адрес и текст подсказки.
    • статическая подсказка. Указывается только текст подсказки.


Достоинства


  1. хранение и изменение ключевых слов со ссылками в структурированном виде (таблице)
  2. навигация по RTF-документам, без изменения самих документов
  3. возможность автодополнения слов (IntelliSense) из словаря, определенного самим пользователем
  4. быстрое создание и изменение ссылок во всех документах, где есть ключевое слово

Недостатки


  1. Проблема с RTF-таблицами. К сожалению, у стандартного компонента RichTextBox есть недостаток с отображаением таблиц. Чтобы устранить этот недостаток используется библиотека Msftedit.dll, которая вносит баги в функции GetPositionFromCharIndex и GetCharIndexFromPosition. С этой проблемой пока не знаю как бороться, но надеюсь, что решение будет найдено. В связи с этим, в версии FAQ.Net 2.7 не рекомендую использовать всплывающие подсказки внутри и после RTF-таблиц.
  2. Не учитывается морфология слов, т.е. каждое слово нужно дублировать новой подсказкой.

Что дальше улучшится в приложении FAQ.Net?


  1. Добавится функция импорта/экспорта словаря подсказок
  2. Появится возможность добавления тегов к заметкам. Кроме этого, добавится возможность ввести свой словарь подсказок на теги.
    Например: создать тег C#, создать ключевые слова нужного цвета. После этого создать функцию подсветки синтаксиса выделенного фрагмента. Это позволит пользователю вводить свои слова и определять свою подсветку слов.

Вывод

В целом, мне функционал очень нравится. Считаю, что цель по навигации среди RTF-документов внутри приложения FAQ.Net достигнута.
В личном пользовании я держу всплывающие подсказки как переводчик, что помогает мне в изучении и запоминании новых иностранных слов.
В словаре можно легко хранить и отображать подсказки для аббревиатур.
В словаре удобно хранить ссылки на статьи из интернета и сопровождать кратким комментарием.

Прилагаемые ссылки к статье

Видео презентация всплывающих подсказок в FAQ.Net
Подробное описание приложения FAQ.Net

Группа ВКонтакте

Скачать Windows приложение FAQ.Net (бесплатно):
(x64) yadi.sk/d/sq3g4NOD3Zt7ZY
(x86) yadi.sk/d/NKXeyUWh4Zt8PQ

Руководство по всплывающим подсказкам (Tooltips)

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

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

Читайте также:

Проектируя лучшие обучающие всплывающие подсказки

Что такое всплывающие подсказки и почему вам следует их использовать?

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

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

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

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

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

Всплывающие подсказки (Tooltips) vs. Подсказки в диалоговом окне (Popup Tips)

Хотя всплывающие подсказки в основном ограничены ПК и ноутбуками, у них есть родственный элемент, который является общим на устройствах с сенсорным экраном –диалоговое окно с подсказкой. Оба элемента преследуют одну и ту же цель: предоставить полезный дополнительный контент. В следующей таблице приведены основные сходства и различия между всплывающими подсказками и подсказками в диалоговом окне.

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

Диалоговое окно с подсказкой

Тип сайта

Десктопный

Любой

Что вызывает

Наведение курсора (при помощи мыши или клавиатуры)

Касание/клик

Когда закрывается

Пользователь покидает предопределенную область взаимодействия

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

Связанный элемент

Иконка, текстовая ссылка, кнопка, изображение

“?” или иконка “i”

Тип контента

Микроконтент

Микроконтент

Эта статья будет посвящена всплывающим подсказкам и их использованию на десктопных сайтах.

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

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

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

Не делайте:

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

Делайте:

FedEx использовал всплывающие подсказки, чтобы предоставить дополнительную информацию для полей формы доставки. Например, в поле «Электронная почта» была всплывающая подсказка, объясняющая, почему это поле было указано в списке. (Доступ к этой подсказке осуществлялся при наведении курсора мыши).

2. Предоставьте во всплывающей подсказке краткий и полезный контент

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

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

Не делайте:

На веб-сайте Sprint кнопка с надписью: «Добавить новую строку» также имела всплывающую подсказку с текстом «Добавить новую строку». Подобная подсказка попросту не нужна.

Делайте:

На сайте Alibaba была строка поиска со значком камеры без подписи. Когда пользователи наводили курсор на этот значок, появлялась всплывающая подсказка «Поиск по изображению». Эта функция была, вероятно, незнакома многим пользователям, и поэтому подсказка, описывающая ее назначение, была полезна.

3. Поддерживайте наведение курсора, как мышью, так и клавиатурой

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

Не делайте:

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

Делайте:

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

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

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

Не делайте:

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

Делайте:

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

5. Используйте подсказки последовательно по всему сайту

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

Не делайте:

Веб-сайт Business Insider в своем меню навигации использовал всплывающие подсказки для 2 из 3 иконок. (Примечание. На главной странице веб-сайта Business Insider иконка глобуса имела всплывающую подсказку с надписью «Значок глобуса». Однако подпись не была полезной и не указывала на ее функциональность: выбор языка). В общем, мы не рекомендуем использовать иконки без подписей и скрывать подписи внутри всплывающих подсказок, но эта ошибка становится еще серьезнее, если подписи всплывающих подсказок развернуты непоследовательно.

Делайте:

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

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

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

  • Убедитесь, что подсказки имеют умеренный контраст по отношению к фону.

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

  • Размещайте всплывающие подсказки так, чтобы они не блокировали связанный контент.

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

Вывод

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

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

Перевод статьи Alita Joyce

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

В эпоху цифровых технологий эстетика превыше всего. Даже ваши всплывающие подсказки должны быть украшены. Вот как.

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

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

В WordPress визуальный контент — это не просто изображения. Типографский контент также может быть визуальным и служить способом привлечь ваше внимание к важной или выделенной информации.

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

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

Подключаемый модуль глоссария всплывающих подсказок

Создает глоссарий терминов от А до Я для разъяснения значений или контекста содержимого вашего сайта внутри всплывающих подсказок. Автоматически создает страницы и обратные ссылки на вашем сайте для улучшения SEO и UEX. Интегрируется со словарем и Википедией.

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

Плагин Tooltip Glossary для WordPress от CreativeMinds позволяет пользователям создавать полный словарь или онлайн-указатель с всплывающими подсказками на страницах WordPress.

Кроме того, информацию можно интегрировать из Википедии или Merriam-Webster, а также добавить ссылки на продукты или термины, чтобы повысить общую поисковую оптимизацию вашего сайта.

Этот плагин также работает с Google Translate для создания двуязычного или трехъязычного контента, и вы даже можете добавлять товары на страницы с помощью WooCommerce и Amazon.

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

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

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

Будь проще

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

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

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

Тщательное размещение изображений

Изображения являются очень важной частью любого веб-сайта. Качественные изображения привлекают внимание и могут помочь продать пользователям товары или услуги. Хорошие изображения также могут удерживать пользователей на веб-странице дольше.

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

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

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

Использование интерактивных элементов

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

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

Выберите свою цветовую схему

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

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

Адаптивные темы

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

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

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

Надстройка визуального виджета глоссария подсказок

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

Надстройка поддерживает шорткод и может быть размещена на боковой панели любой страницы или поста WordPress.

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

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

Заключение

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

Есть много способов добиться этого, например, с помощью плагинов и надстроек WordPress, которые добавляют цвет и стиль ко всем сообщениям и страницам.

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

Подсказки таблицы данных | Dash for Python Documentation

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

Эти свойства можно использовать для указания DataTable Подсказка:
— Tooltip : Конфигурация подсказок на основе столбцов, применяемая ко всем строкам
— Tooltip_conditional : условные подсказки инструментов. определена всплывающая подсказка для каждого столбца заголовка и, необязательно, каждой строки заголовка
— tooltip_delay : Задержка по умолчанию для всей таблицы перед отображением всплывающей подсказки
— tooltip_duration : Длительность по умолчанию для всей таблицы до исчезновения всплывающей подсказки. Установите значение None , чтобы всплывающая подсказка не исчезала.

Подробное описание см. в справочнике по таблице данных.

Подсказки к отдельным ячейкам

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

В этом примере в ячейке заголовка отображаются те же данные:

 из тире импортировать Dash, dash_table
импортировать панд как pd
из коллекций импортировать OrderedDict
data_election = OrderedDict(
    [
        (
            "Дата",
            [
                «12 июля 2013 г. - 25 июля 2013 г.»,
                «12 июля 2013 г. - 25 августа 2013 г.»,
                «12 июля 2014 г. - 25 августа 2014 г.»,
            ],
        ),
        (
            "Избирательная организация",
            ["Нью-Йорк Таймс", "Пью Рисёрч", "Вашингтон Пост"],
        ),
        («Повтор», [1, -20, 3,512]),
        ("Дэм", [10, 20, 30]),
        ("Инд", [2, 10924, 3912]),
        (
            "Область",
            [
                «От севера штата Нью-Йорк до южных Аппалачей»,
                "Канада",
                «Южный Вермонт»,
            ],
        ),
    ]
)
df = pd. DataFrame(data_election)
приложение = Тире (__имя__)
app.layout = dash_table.DataTable(
    данные = df.to_dict («записи»),
    columns=[{'id': c, 'name': c} для c в df.columns],
    подсказка_данные=[
        {
            столбец: {'значение': ул (значение), 'тип': 'уценка'}
            для столбца значение в row.items()
        } для строки в df.to_dict('records')
    ],
    # Переполнение в многоточие
    style_cell={
        «переполнение»: «скрыто»,
        'textOverflow': 'многоточие',
        'максимальная ширина': 0,
    },
    подсказка_задержка = 0,
    tooltip_duration = Нет
)
если __name__ == '__main__':
    app.run_server(отладка=Истина)

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

 из тире импортировать Dash, dash_table
приложение = Тире (__имя__)
app.layout = dash_table. DataTable(
    данные = [
        {'магазин': 'Бейкерсфилд', 'продажи': 4, 'цель': 10},
        {'магазин': 'Беркли', 'продажи': 10, 'цель': 1},
        {'магазин': 'Большое медвежье озеро', 'продажи': 5, 'цель': 4}
    ],
    столбцы=[
        {'id': 'магазин', 'имя': 'Местоположение магазина'},
        {'id': 'продажи', 'имя': 'Доход от продаж'},
        {'id': 'цель', 'имя': 'Цель дохода'},
    ],
    подсказка_данные=[
        {
            'магазин': 'Расположение в Бейкерсфилде',
            «Продажи»: «Доход 4 млн долларов»,
            'goal': {'value': '6M **меньше** цели', 'type': 'markdown'}
        },
        {
            'магазин': 'Расположение в Беркли',
            'продажи': 'Доход 10 миллионов долларов',
            'цель': {'значение': '9M **over** Goal', 'type': 'markdown'}
        },
        {
            'shop': 'Место на озере Биг-Бэар',
            «Продажи»: «Доход 5 млн долларов»,
            'goal': {'value': '1M **over** Goal', 'type': 'markdown'}
        },
    ],
    подсказка_задержка = 0,
    tooltip_duration = Нет
)
если __name__ == '__main__':
    app. run_server(отладка=Истина)

В этом примере в каждом столбце отображается содержимое, отличное от того, что
отображается в ячейке.

 из тире импортировать Dash, dash_table
импортировать панд как pd
приложение = Тире (__имя__)
df = pd.DataFrame({
    'магазин': ['Бейкерсфилд', 'Беркли', 'Большое Медвежье озеро'],
    «продажи»: [3, 1, 5],
    «цель»: [10, 1, 4],
    'адрес': [
        '3000 Mall View Road, Suite 1107\n\nБейкерсфилд, Калифорния\n\n93306',
        '2130 Center Street, Suite 102\n\nБеркли, Калифорния\n\n94704',
        '652 Pine Knot Avenue\n\nBig Bear Lake, CA\n\n92315'
    ]
})
app.layout = dash_table.DataTable(
    данные = df.to_dict («записи»),
    columns=[{'id': c, 'name': c} для c в ['магазине', 'продажах', 'цели']],
    подсказка_данные=[{
        'магазин': {'значение': строка['адрес'], 'тип': 'уценка'},
        'продажи': {
            'value': 'Продажи были **{} {}**, чем цель'.format(
                str(abs(строка['цель'] - строка['продажи'])),
                'меньше', если строка['цель'] > строка['продажи'] еще 'больше'
            ),
            'тип': 'уценка'
        },
        'goal': 'Целью было {}'. format(
            «не достигнуто», если строка ['цель'] > строка ['продажи'], иначе «достигнуто»
        ),
    } для строки в df.to_dict('records')],
    подсказка_задержка = 0,
    tooltip_duration = Нет
)
если __name__ == '__main__':
    app.run_server(отладка=Истина)

Подсказки в заголовках столбцов

Если ваши заголовки столбцов сокращены или обрезаны
(см. Ширина таблицы данных),
, поместите всплывающую подсказку в заголовок с помощью tooltip_header .

Мы рекомендуем придать заголовку легкий стиль, чтобы указать, что
он «зависает». Мы используем пунктирное подчеркивание с text-decoration .
Это не поддерживается в IE11.

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

 из тире импортировать Dash, dash_table
импортировать панд как pd
из коллекций импортировать OrderedDict
data_election = OrderedDict(
    [
        (
            "Дата",
            [
                «12 июля 2013 г.  - 25 июля 2013 г.»,
                «12 июля 2013 г. - 25 августа 2013 г.»,
                «12 июля 2014 г. - 25 августа 2014 г.»,
            ],
        ),
        (
            "Избирательная организация",
            ["Нью-Йорк Таймс", "Пью Рисёрч", "Вашингтон Пост"],
        ),
        («Повтор», [1, -20, 3,512]),
        ("Дэм", [10, 20, 30]),
        ("Инд", [2, 10924, 3912]),
        (
            "Область",
            [
                «От севера штата Нью-Йорк до южных Аппалачей»,
                "Канада",
                «Южный Вермонт»,
            ],
        ),
    ]
)
df = pd.DataFrame(data_election)
приложение = Тире (__имя__)
app.layout = dash_table.DataTable(
    данные = df.to_dict («записи»),
    columns=[{'id': c, 'name': c} для c в df.columns],
    tooltip_header={i: i вместо i в df.columns},
    # Стиль заголовков с пунктирным подчеркиванием для обозначения всплывающей подсказки
    style_header={
        'textDecoration': 'подчеркивание',
        'textDecorationStyle': 'точечный',
    },
    # Переполнение в многоточие
    style_cell={
        «переполнение»: «скрыто»,
        'textOverflow': 'многоточие',
        'максимальная ширина': 0,
    },
    подсказка_задержка = 0,
    tooltip_duration = Нет
)
если __name__ == '__main__':
    app. run_server(отладка=Истина)

Кроме того, вы можете указать другое имя в tooltip_header
или указать подмножество столбцов:

 из тире импортировать Dash, dash_table
импортировать панд как pd
из коллекций импортировать OrderedDict
data_election = OrderedDict(
    [
        (
            "Дата",
            [
                «12 июля 2013 г. - 25 июля 2013 г.»,
                «12 июля 2013 г. - 25 августа 2013 г.»,
                «12 июля 2014 г. - 25 августа 2014 г.»,
            ],
        ),
        (
            "Избирательная организация",
            ["Нью-Йорк Таймс", "Пью Рисёрч", "Вашингтон Пост"],
        ),
        («Повтор», [1, -20, 3,512]),
        ("Дэм", [10, 20, 30]),
        ("Инд", [2, 10924, 3912]),
        (
            "Область",
            [
                «От севера штата Нью-Йорк до южных Аппалачей»,
                "Канада",
                «Южный Вермонт»,
            ],
        ),
    ]
)
df = pd.DataFrame(data_election)
приложение = Тире (__имя__)
app. layout = dash_table.DataTable(
    данные = df.to_dict («записи»),
    columns=[{'id': c, 'name': c} для c в df.columns],
    tooltip_header={
        «Репутация»: «Республиканец»,
        «Дем»: «Демократ»,
        «Инд»: «Независимый»,
    },
    # Стиль заголовков с пунктирным подчеркиванием для обозначения всплывающей подсказки
    style_header_conditional=[{
        'если': {'column_id': столбец},
        'textDecoration': 'подчеркивание',
        'textDecorationStyle': 'точечный',
    } для столбца в ['Rep', 'Dem', 'Ind']],
    # Переполнение в многоточие
    style_cell={
        «переполнение»: «скрыто»,
        'textOverflow': 'многоточие',
        'максимальная ширина': 0,
    },
    подсказка_задержка = 0,
    tooltip_duration = Нет
)
если __name__ == '__main__':
    app.run_server(отладка=Истина)

Обратите внимание, что многоточие не отображается в заголовках. Это ошибка, подпишитесь на
plotly/dash-table#735
, чтобы узнать подробности.

Если таблица DataTable имеет несколько строк заголовков, используйте список
в качестве значения элементов tooltip_header .

Для объединенных ячеек значения должны повторяться в каждой ячейке.

 из тире импортировать Dash, dash_table
приложение = Тире (__имя__)
app.layout = dash_table.DataTable(
    столбцы=[
        {"имя": ["", "год"], "id": "год"},
        {"название": ["Город", "Монреаль"], "id": "Монреаль"},
        {"название": ["Город", "Торонто"], "id": "Торонто"},
        {"название": ["Город", "Оттава"], "id": "оттава"},
        {"название": ["Город", "Ванкувер"], "id": "Ванкувер"},
        {"name": ["Климат", "Температура"], "id": "temp"},
        {"name": ["Климат", "Влажность"], "id": "влажность"},
    ],
    данные = [{
        «год»: i, «монреаль»: i * 10, «торонто»: i * 100,
        «оттава»: я * -1, «ванкувер»: я * -10, «темп»: я * -100,
        «влажность»: i * 5,
    } для i в диапазоне (10)],
    merge_duplicate_headers = Верно,
    tooltip_header={
        'год': ['', 'Год измерения'],
        'montreal': ['Средние измерения по городу', 'Монреаль, Квебек, Канада'],
        'toronto': ['Средние измерения по городу', 'Торонто, Онтарио, Канада'],
        'ottawa': ['Средние измерения по городу', 'Оттава, Онтарио, Канада'],
        'vancouver': ['Средние измерения по городу', 'Ванкувер, Британская Колумбия, Канада'],
        'temp': ['Среднее значение за год', 'Цельсий'],
        'влажность': ['Средняя за год', 'Процент'],
    },
    style_header={
        'textDecoration': 'подчеркивание',
        'textDecorationStyle': 'точечный',
    },
)
если __name__ == '__main__':
    app. run_server(отладка=Истина)

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

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

Если всплывающая подсказка указана и для заголовков, и для ячеек, вы можете использовать
свойство use_with вместо указания отдельного tooltip_header
и всплывающей подсказки .

 из тире импортировать Dash, dash_table
импортировать панд как pd
из коллекций импортировать OrderedDict
data_election = OrderedDict(
    [
        (
            "Дата",
            [
                «12 июля 2013 г. - 25 июля 2013 г.»,
                «12 июля 2013 г. - 25 августа 2013 г.»,
                «12 июля 2014 г. - 25 августа 2014 г.»,
            ],
        ),
        (
            "Избирательная организация",
            ["Нью-Йорк Таймс", "Пью Рисёрч", "Вашингтон Пост"],
        ),
        («Повтор», [1, -20, 3,512]),
        ("Дэм", [10, 20, 30]),
        ("Инд", [2, 10924, 3912]),
        (
            "Область",
            [
                «От севера штата Нью-Йорк до южных Аппалачей»,
                "Канада",
                «Южный Вермонт»,
            ],
        ),
    ]
)
df = pd. DataFrame(data_election)
приложение = Тире (__имя__)
app.layout = dash_table.DataTable(
    данные = df.to_dict («записи»),
    columns=[{'id': c, 'name': c} для c в df.columns],
    подсказка = {я: {
        «значение»: я,
        'use_with': 'both' # оба относятся к заголовку и ячейке данных
    } для i в df.columns},
    # Стиль заголовков с пунктирным подчеркиванием для обозначения всплывающей подсказки
    style_header={
        'textDecoration': 'подчеркивание',
        'textDecorationStyle': 'точечный',
    },
    # Переполнение в многоточие
    style_cell={
        «переполнение»: «скрыто»,
        'textOverflow': 'многоточие',
        'максимальная ширина': 0,
    },
    подсказка_задержка = 0,
    tooltip_duration = Нет
)
если __name__ == '__main__':
    app.run_server(отладка=Истина)

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

Подсказки также можно настраивать в зависимости от условий.
Свойство tooltip_conditional имеет тот же синтаксис, что и свойство style_data_conditional
, многие примеры см. в главе условного форматирования
.

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

 из тире импортировать Dash, dash_table
импортировать панд как pd
из коллекций импортировать OrderedDict
данные = OrderedDict(
    [
        ("Дата", ["01.01.2015", "24.10.2015", "10.05.2016", "10.01.2017", "10.05.2018", "08.05.2018" -15"]),
        («Регион», [«Монреаль», «Торонто», «Нью-Йорк», «Майами», «Сан-Франциско», «Лондон»]),
        ("Температура", [1, -20, 3,512, 4, 10423, -441,2]),
        ("Влажность", [10, 20, 30, 40, 50, 60]),
        ("Давление", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)
df = pd.DataFrame(данные)
приложение = Тире (__имя__)
app.layout = dash_table.DataTable(
    данные = df.to_dict («записи»),
    columns=[{'name': i, 'id': i} для i в df.columns],
    подсказка_условная=[
        {
            'если': {
                'filter_query': '{Регион} содержит "Новый"'
            },
            'тип': 'уценка',
            'value': 'Эта строка является значимой. '
        }
    ],
    style_data_conditional=[
        {
            'если': {
                'filter_query': '{Регион} содержит "Новый"'
            },
            'фоновый цвет': '#0074D9',
            'белый цвет',
            'textDecoration': 'подчеркивание',
            'textDecorationStyle': 'точечный',
        }
    ],
    подсказка_задержка = 0,
    tooltip_duration = Нет
)
если __name__ == '__main__':
    app.run_server(отладка=Истина)

Изображения во всплывающих подсказках

Markdown поддерживает изображения со следующим синтаксисом: ![alt](src)
где alt относится к замещающему тексту изображения
, а src — это путь к изображению (

src 9 свойство).

src может ссылаться на изображения в папке «assets» вашего проекта
или на абсолютные URL-адреса. При обращении к изображению в папке assets ,
мы рекомендуем использовать app.get_relative_path , чтобы URL-адрес изображения
был правильным при локальной работе и при развертывании в Dash Enterprise.

 из тире импортировать Dash, dash_table
приложение = Тире (__имя__)
app.layout = dash_table.DataTable(
    данные = [
        {'магазин': 'Бейкерсфилд', 'продажи': 4, 'цель': 10},
        {'магазин': 'Беркли', 'продажи': 10, 'цель': 1},
        {'магазин': 'Большое медвежье озеро', 'продажи': 5, 'цель': 4}
    ],
    столбцы=[
        {'id': 'магазин', 'имя': 'Местоположение магазина'},
        {'id': 'продажи', 'имя': 'Доход от продаж'},
        {'id': 'цель', 'имя': 'Цель дохода'},
    ],
    подсказка_данные=[
        {
            'магазин': {
                'value': 'Расположение в Бейкерсфилде\n\n![Бейкерсфилд]({})'.format(
                    app.get_relative_path('/assets/images/table/bakersfield.jpg')
                ),
                'тип': 'уценка'
            }
        },
        {
            'магазин': {
                'value': 'Расположение в Беркли\n\n![Беркли]({})'.format(
                    app.get_relative_path('/assets/images/table/berkeley.jpg')
                ),
                'тип': 'уценка'
            }
        },
        {
            'магазин': {
                'value': 'Расположение на озере Биг-Бэар\n\n![Озеро Биг-Бэар](https://upload. wikimedia.org/wikipedia/commons/thumb/d/d9/Big_Bear_Valley%2C_California.jpg/1200px-Big_Bear_Valley%2C_California.jpg)',
                'тип': 'уценка'
            }
        },
    ],
    # Стиль заголовков с пунктирным подчеркиванием для обозначения всплывающей подсказки
    style_data_conditional=[{
        'если': {'column_id': 'магазин'},
        'textDecoration': 'подчеркивание',
        'textDecorationStyle': 'точечный',
    }],
    подсказка_задержка = 0,
    tooltip_duration = Нет
)
если __name__ == '__main__':
    app.run_server(отладка=Истина)

Таблицы во всплывающих подсказках

Markdown поддерживает таблицы с таким синтаксисом:

 | Город | Значение | Возврат |
| :------------- | :----------: | -----------: |
| Монреаль | 41 531 | 431.245 |
| Сиэтл | 53 153 | 12.431 |
Город Значение Возврат
Монреаль 41 531 431. 245
Сиэтл 53 153 12.431

Это можно указать в значении таблицы:

 из импорта тире Dash, dash_table
приложение = Тире (__имя__)
уценочная_таблица = """
| Город | Значение | Возврат |
| :------------- | :----------: | -----------: |
| Монреаль | 41 531 | 431.245 |
| Сиэтл | 53 153 | 12.431 |
"""
app.layout = dash_table.DataTable(
    данные = [
        {'магазин': 'Бейкерсфилд', 'продажи': 4, 'цель': 10},
        {'магазин': 'Беркли', 'продажи': 10, 'цель': 1},
        {'магазин': 'Большое медвежье озеро', 'продажи': 5, 'цель': 4}
    ],
    столбцы=[
        {'id': 'магазин', 'имя': 'Местоположение магазина'},
        {'id': 'продажи', 'имя': 'Доход от продаж'},
        {'id': 'цель', 'имя': 'Цель дохода'},
    ],
    подсказка={
        c: {'значение': markdown_table, 'тип': 'уценка'}
        for c in ['магазин', 'продажи', 'цель']
    },
    подсказка_задержка = 0,
    tooltip_duration = Нет
)
если __name__ == '__main__':
    app. run_server(отладка=Истина)

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

Всплывающие подсказки можно стилизовать с помощью CSS-классов dash-tooltip (контейнер) и dash-table-tooltip (содержимое).
Это можно указать в файле CSS в папке assets/
или в самой таблице с помощью свойства css .

 из тире импортировать Dash, dash_table
импортировать панд как pd
из коллекций импортировать OrderedDict
данные = OrderedDict(
 [
 ("Дата", ["01.01.2015", "24.10.2015", "10.05.2016", "10.01.2017", "10.05.2018", "08.05.2018" -15"]),
 («Регион», [«Монреаль», «Торонто», «Нью-Йорк», «Майами», «Сан-Франциско», «Лондон»]),
 ("Температура", [1, -20, 3,512, 4, 10423, -441,2]),
 ("Влажность", [10, 20, 30, 40, 50, 60]),
 («Давление», [2, 10924, 3912, -10, 3591.2, 15]),
 ]
)
df = pd.DataFrame(данные)
приложение = Тире (__имя__)
app.layout = dash_table.DataTable(
 данные = df.to_dict («записи»),
 columns=[{'id': c, 'name': c} для c в df.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *