Небольшая JS-библиотека, которая создает компактные всплывающие подсказки JavaScript в любой части экрана. Не использует зависимостей.
Многие сайты используют всплывающее окно подсказка (tooltips) с каким-то текстом для пользователя. На самом деле, это очень серьезная задача. Главная цель – это помочь пользователю разобраться в интерфейсе, а не помешать ему, что и делают большинство плагинов всплывающих подсказок.
notti.js отлично выполняет свою работу. Он создает не отвлекающие окошки с информацией, которые, в то же время, трудно не заметить.
Вот gif-пример того, как работает плагин:
Почему нужно использовать именно этот плагин всплывающих подсказок?
- Крошечный размер: 2.2 Кб
- Нет внешних зависимостей в CSS
- Нет зависимостей на jQuery
- Полностью настраиваемый
Установка и использование:
Подключаем библиотеку
<script src="https://unpkg.com/notti@0.0.5"></script>
Задаем параметры
import { notti } from 'notti';
notti('Hello User!');
notti({
// HTML Element
message: 'Hello! User',
isHTML: true,
style : {
backgroundColor: '#333',
color:'#fff',
bottom: '10px',
right: '10px'
},
onHide: () => {
console.log('Awesome notti.js!')
}
});
Использование API
/**
* @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);
Настраиваемые параметры
/**
* @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' || 'Hi Folks
',
// 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, поэтому на нее стоит обратить внимание.