notti.js — маленькие всплывающие подсказки JavaScript

Небольшая 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, поэтому на нее стоит обратить внимание.