Всплывающие подсказки (интерактивные) на Balloon.css

Опубликовано автором

Посмотреть примеры

Страница проекта: https://kazzkiq.github.io/balloon.css/

Пример на JSFiddle: https://jsfiddle.net/kuzmd942/

Подключение из CDN:

<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">

GitHub: https://github.com/kazzkiq/balloon.css

 

Пример использования HTML:

<button aria-label="Whats up!" data-balloon-pos="up">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="left">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="right">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="down">Hover me!</button>

<button aria-label="Whats up!" data-balloon-pos="up-left">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="up-right">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="down-left">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="down-right">Hover me!</button>

 

Изменение индивидуальных стилей CSS:

.tooltip-red {
  --balloon-color: red;
}

.tooltip-big-text {
  --balloon-font-size: 20px;
}

.tooltip-slide {
  --balloon-move: 30px;
}

 

Изменение общих стилей на CSS:

:root {
  --balloon-border-radius: 0;
  --balloon-color: blue;
}

 

Скачать версию GitHub от 29.08.2021

Открыть на данном сайте:
balloon.css
balloon.min.css