всплывающие подсказки

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

1363 просмотров