Popper.js — маленький плагин всплывающих подсказок для сайта

03.04.2017 weatherless JavaScript » Подсказки (tooltips) » #920

Смотреть Источник Скачать

Компактный и простой в использовании плагины JavaScript – Popper.js с максимум возможностей для динамических всплывающих подсказок на сайте.

Если в Ваших задачах стоит потребность в небольших появляющихся боксах с каким-либо контентом, то Вам определенном стоит обратить внимание на плагины ~~Popper.js~~.

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

Работа с плагином для всплывающих подсказок на сайте:

<!-- подключаем библиотеку -->
<script type="text/javascript" src="https://unpkg.com/popper.js"></script>
<!-- подключаем универсальный скрипт, который использует API propper.js для упрощенного использование подсказок -->
<script type="text/javascript" src="https://unpkg.com/tooltip.js"></script>

Ищем элемент с классом «my-button» и задаем расположение бокса с подсказкой «my-propper»

var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var anotherPopper = new Popper(
    reference,
    popper,
    {
        // опции плагина
    }
);

var reference = document.querySelector('.my-button');

var popper = document.querySelector('.my-popper');

var anotherPopper = new Popper(

reference,

popper,

{

// опции плагина

}

);

Перечень всех опций для упрощенного варианта ~~tooltip.js~~ находиться здесь, для полного функционала ~~propper.js~~ – здесь.

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