Как создать директиву всплывающей подсказки в Angular
Подсказки являются неотъемлемой частью многих пользовательских интерфейсов.
Предоставляя важную информацию там, где одни значки не могут этого сделать, они являются отличным способом сохранить интерфейс чистым, но при этом удобным для использования. Одних значков редко бывает достаточно, чтобы предоставить новому пользователю всю необходимую информацию о функциональности.
За исключением хорошо зарекомендовавших себя иконок, таких как значок сохранения, важно описать, что кнопка будет делать для пользователя, незнакомого с вашим интерфейсом.
Некоторое время я собирал непоследовательные и беспорядочные методы реализации всплывающих подсказок в каждом конкретном случае. В конце концов я решил стандартизировать способ их реализации и создал простую в использовании директиву Angular, которая позволяет быстро добавлять всплывающую подсказку к элементу. Директивы — это идеальный способ обработки всплывающих подсказок, поскольку они позволяют нам прикреплять логику к любому элементу независимо от его положения или стиля.
Требования
Подсказка должна всплывать с текстом, когда пользователь наводит курсор на элемент в течение определенного периода времени. Он должен оставаться как минимум достаточно долго, чтобы пользователь мог его прочитать, и исчезать, когда пользователь больше не зависает над элементом.
Кроме того, это не должно влиять на остальную часть страницы, будь то нажатие других элементов или изменение родителя. Наконец, он должен быть легко читаемым и кратким.
Стиль
Это SCSS для всплывающей подсказки:
Здесь важно отметить, что pointer-events: none означает, что сама всплывающая подсказка не будет реагировать на события щелчка или наведения.
Это необходимо для того, чтобы всплывающая подсказка не загораживала другие элементы, особенно элемент, к которому она прикреплена.
Цвета, размер и т. д., конечно, на ваше усмотрение, но обычно чем проще всплывающая подсказка, тем лучше.
Код
Начнем сверху. Директива имеет обязательный ввод, сам текст всплывающей подсказки и необязательный ввод для изменения задержки между наведением курсора на главный элемент и появлением всплывающей подсказки. Я считаю, что 190 мс хорошо работает по умолчанию. Конструктор принимает ElementRef, чтобы мы могли ссылаться на основной элемент для позиционирования всплывающей подсказки.
Затем у нас есть два HostListeners, один для обнаружения, когда мышь наводит курсор на элемент, и один для обнаружения, когда мышь уходит. Когда мышь входит в элемент, мы устанавливаем задержку для отображения всплывающего окна, сохраняя ссылку на время ожидания. Если мышь покинет элемент до истечения времени ожидания, мы сотрем время ожидания и не будем показывать всплывающее окно. Если тайм-аут завершается, мы вызываем createTooltipPopup.
Функция createTooltipPopup создает HTML для нашего всплывающего элемента и присваивает ему класс и позицию. Позиция устанавливается в середине основного элемента, на 6 пикселей ниже его. Так как всплывающая подсказка имеет position: fixed, она не будет нарушать работу других элементов на странице. Наконец, мы добавляем тайм-аут для удаления всплывающего окна через 5 секунд. Кроме того, всплывающее окно также удаляется, когда мышь покидает основной элемент.
С помощью этой директивы вы можете просто прикрепить всплывающую подсказку к любому элементу, например:
<div class="user-icon" [tooltip]="'Sign In'"></div>
Не стесняйтесь внедрять эту директиву в свои собственные приложения Angular, изменяя стили в соответствии с вашими потребностями. Я надеюсь, что вы нашли это полезным; Спасибо за чтение.
Дальнейшее чтение
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
