Tippy.js – универсальный плагин всплывающих подсказок

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

Скачать Примеры

Примеры Tippy.js и его подключение

Tippy.js, как и любой другой плагин, подключается вставкой кода в «шапку» и «подвал». Можно использовать CDN доставку или загрузить файлы плагина себе на хостинг.

Подключение файлов

<!-- Development -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script>
      tippy('.myButton', {
        content: 'Универсальный плагин всплывающих подсказок',
      });
        
          tippy('.myButton2', {
        content: 'Тут тоже есть текст',
                trigger: 'click',
      });
</script>

Пример кода Посмотреть

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tippy.js – универсальный плагин всплывающих подсказок</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
* {
    margin: 0;
    padding: 0;
}

html, body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}  

a {
    color: #5587c4;
    text-decoration: none;
}

.button {
    display: inline-block;
    padding: 15px;
    border-radius: 3px;
    background-color: background: -webkit-linear-gradient(315deg,#73a5ff, #5477f5);
    background: linear-gradient(135deg,#73a5ff, #5477f5);
    color: white;
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
    font-size: 1.3rem;
    transition: all .3 ease;
    position: relative;
        border: none;
        margin-right: 20px;
        font-family: arial;
        font-size: 16px;
        cursor: pointer;
}
</style>

<a href="" class="myButton button">Подсказка</a>
<button class="myButton2 button">Нажми на меня</button>

<!-- Development -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script>
      tippy('.myButton', {
        content: 'Универсальный плагин всплывающих подсказок',
      });
        
          tippy('.myButton2', {
        content: 'Тут тоже есть текст',
                trigger: 'click',
      });
</script>
</body>
</html>

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

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