«Tippy.js» — полное решение (подсказки, всплывающие окна)...
Регистрация Войти

«Tippy.js» — полное решение (подсказки, всплывающие окна)...

Tippy.js — это комплексное решение для всплывающих подсказок, всплывающих окон, раскрывающихся списков и меню на базе Popper.

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

Почему Tippy?

  • Умный: всегда будет оптимально плавать в поле зрения
  • Универсальный: совместим с мышью, клавиатурой и сенсорным вводом
  • Настраиваемый: настраиваемая функциональность и полная стилизация с помощью CSS
  • Типизировано: поддержка TypeScript

Tooltips и popovers вместе?

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

Tippy.js различает их следующим образом:

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

«Tippy.js» — полное решение

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

Оба они называются «типичными» при использовании Tippy.js!

Ресурсы:

License: MIT

P.S. Сегодня, завтра постараюсь интегрировать полностью сюда. Нам необходимо это будет и для бесконечного скроллинга. Пока только добавил, чтобы меню в шапке сайта работало на мобильных устройствах.

F5 (ctrl +f5) необходимо…

LibArea JavaScript
9
1.1k
+ Читать

10 Ответов

  1. Хорошая библиотека, универсальная. Одна из лучших и поддерживается — самое главное. Использовал её в одном проекте.

    1
    Ответить

    1. Вот теперь надо убрать лишнее, опять )) объединить и т.д. Стили подправить и вроде всё теперь есть. Вроде, наверное… уже не знаю. )

      Ответить

  1. Tooltips и popovers вместе — хорошее решение. 10.000 звезд на GitHub говорит про это. Теперь можно рекомендации, подписки сделать на Агути другие. Несколько месяцев назад говорил же про неё. )

    1
    Ответить

    1. Да, … было такое. ) Вот и стоит. )

      Ответить

  1. А я и не заметил перехода. В ленте подсказки появились. Быстро.

    1
    Ответить

    1. Пока не было перехода, я просто поверх, как заплатку поставил. Быстро чтобы было. А если делать всё правильно, то убирать и объединять необходимо всё, не только js, но и css описывать для разных тем и ночного режима. Работы достаточно на самом деле. А как заплатка, это да, быстро. )

      Ответить

  1. F5 (ctrl +f5) необходимо… Залил последнее обновление в этом году. Более ровный дизайн в том числе и в ночной теме.

    2
    Ответить

    1. Уже лучше! В ночной теме слишком белый цвет резал глаза.

      Ответить
Комментарий удален...

  1. Хочу использовать Tippy https://atomiks.github.io/tippyjs/
    И как я понял на мобильных устройствах подсказки вызываются только при клике на кнопку/текст? Примеры у них на сайте
    Прочитал только, что можно сделать вызов долгим зажатием, а вот чтобы без клика можно было вызывать непонятно как это сделать https://atomiks.github.io/tippyjs/v6/misc/

    1
    Ответить

    1. Уже забыл, а только год прошел ) не могу подсказать, заново надо разбираться. Попробуйте: trigger: 'manual', убрать. В первых примерах, когда надо клик, добавляют: trigger: 'click',. Может быть там другие какие-то значение этого есть.

      Ответить