📖 Detailed overview

При наведении на этот компонент, всплывает подсказака, в виде текста. Подойдет для элементов сайта, которым требуется небольшое описание, при наведении на них. Например, для расшифровки терминов.

🎬 Live Demo

Live demo link

⚙️ Usage

Добавьте компонент на страницу и посмотрите как он работает в режиме превью.

Поменять направление

За положение, где будет всплывать подсказка, отвечает свойство Положение Tooltip.

Автоматическая смена положения

Если свойство активно, то всплывающая подсказка автоматически будем менят свое положение, при нехватке места. При этом будут учитываться все имеющиеся отступы.

🧩 Components and Props

| Props Name | Type | Description | Default | Example | | ------------------------------ | :------: | :---------------------------------------------------------------------------: | :------------: | :-----: | | Размер стрелочки | string | Размер стрелочки | 8px | 20px | | Отступ стрелочки | bool | Отступ стрелочки от блока с контентом | 4px | 10px | | ArroowStatusProp | bool | Показать / Скрыть стрелочку | true | false | | Положение Tooltip | enum | Положение стрелочки относительно блока с контентом [top, bottom, left, right] | top | left | | Цвет Tooltip | string | Цвет фона Tooltip и цвет стрелочки | --color-dark | #000 | | Отступ от краев | string | Минимальное расстояние между Tooltip до любого края окна | 0 | 20px | | Показать Tooltip | enum | Способ отображения [always, hover] | always | hover | | Автоматическая смена положения | bool | Изменять положение Tolltip при нехватке места. | true | false |

🗓 Changelog

• 16/03/2021 (v1.0)
  • Первая версия

📮 Feedback

If you encountered a bug, please contact us so we can fix it promptly. We’re rapidly developing, so don’t hesitate to send us your feedback and request new features you can’t stand missing. Feel free to share what you’re working on - we love to see what you’re building with Quarkly!

Help with components We're on Discord Our Twitter [email protected]

📝 License

Licensed under the MIT License.