Небольшая JS-библиотека, которая создает компактные всплывающие подсказки JavaScript в любой части экрана. Не использует зависимостей.
Многие сайты используют всплывающее окно подсказка (tooltips) с каким-то текстом для пользователя. На самом деле, это очень серьезная задача. Главная цель – это помочь пользователю разобраться в интерфейсе, а не помешать ему, что и делают большинство плагинов всплывающих подсказок.
notti.js отлично выполняет свою работу. Он создает не отвлекающие окошки с информацией, которые, в то же время, трудно не заметить.
Вот gif-пример того, как работает плагин:
Почему нужно использовать именно этот плагин всплывающих подсказок?
- Крошечный размер: 2.2 Кб
- Нет внешних зависимостей в CSS
- Нет зависимостей на jQuery
- Полностью настраиваемый
Установка и использование:
Подключаем библиотеку
|
1 |
<script src="https://unpkg.com/notti@0.0.5"></script> |
Задаем параметры
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { notti } from 'notti'; notti('Hello User!'); notti({ // HTML Element message: '<strong>Hello! User', isHTML: true, style : { backgroundColor: '#333', color:'#fff', bottom: '10px', right: '10px' }, onHide: () => { console.log('Awesome notti.js!') } });</strong> |
Использование API
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/** * @name notti * type Function * @description Show an notification * @param {String || Object } The message or customizable Object */ notti('Hi Folks!'); // or const customizable = { message: 'Hi folks', style: { backgroundColor: '#333', color: '#fff', top: '10px', right: '10px', } } notti(customizable); |
Настраиваемые параметры
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/** * @param {String} message The notification message * @param {Object} style Customizable style * @param {Boolean} autoHide Auto hide the notification box * @param {Boolean} hideOnClick Hide the notification when clicked * @param {Boolean} isHTML If the message string contains HTML Element * @param {Integer} delay The notification hide delay time * @param {Function} onHide The Function that will be called when the notification disappear **/ const config = { // required message: 'Hi Folks' || '<p>Hi <span class="username">Folks</span></p>', // just true if your message contains HTML Element isHTML: false, //default //optional style: {}, //default //optional autoHide: true, //default //optional hideOnClick: true, //default //optional delay: 2000, //default //optional onHide: ()=>{console.log('Awesome notti.js')} } |
Скачать исходные файлы плагина всплывающие подсказки JavaScript можно по ссылке выше. Данная библиотека сегодня набирает популярность на Github, поэтому на нее стоит обратить внимание.