Возможно вас это заинтересует
Wenk.css – легкая библиотека для тултипов написанная на CSS. С ее помощью можно легко и быстро сделать простенькие тултипы на сайте без использования дополнительных скриптов!
Установка
Установка как обычно проста, вставить ссылку на файл в коде страницы, файл можно подключать из репозитория, но лучше скачать и поставить локально:
|
1 2 3 4 |
<link rel="stylesheet" href="https://unpkg.com/wenk/dist/wenk.css"> <!-- или --> <link rel="stylesheet" href="https://cdn.rawgit.com/mightyCrow/wenk/master/dist/wenk.css"> <!-- или подключить локально --> |
Использование
Чтобы создать тултип нужно в html теге добавить атрибут data-wenk с вашим любым текстом:
|
1 |
<span data-wenk="Опа, я тултип!">Наведи на меня!</span> |
Так же можно регулировать положение подсказок атрибутом data-wenk-pos или добавлением класса к тегу .wenk–*. По умолчанию подсказка появляется с верху.
|
1 2 3 4 5 6 7 |
<span data-wenk="Подсказка с права!" data-wenk-pos="right">Wenk.css с права!</span> <span data-wenk="Подсказка с лева!" data-wenk-pos="left">Wenk.css с лева!</span> <span data-wenk="Подсказка с низу!" data-wenk-pos="bottom">Wenk.css с низу!</span> <!-- или --> <span class="wenk--right" data-wenk="Подсказка с права!">Wenk.css с права!</span> <span class="wenk--left" data-wenk="Подсказка с лева!">Wenk.css с лева!</span> <span class="wenk--bottom" data-wenk="Подсказка с низу!">Wenk.css с низу!</span> |
Так же в этой библиотеке заложены 4 стиля с размерами подсказок, добавляются через data-wenk-length=”small|medium|large|fit”, либо с помощью css класса .wenk-length–*:
|
1 2 3 4 5 6 7 8 9 |
<span data-wenk="Я маленькая!" data-wenk-length="small">Маленькая подсказка!</span> <span data-wenk="Я средняя!" data-wenk-length="medium">Средняя подсказка!</span> <span data-wenk="Я большая!" data-wenk-length="large">Большая подсказка!</span> <span data-wenk="Я под ширину текста!" data-wenk-length="fit">Подсказка под ширину текста!</span> <!-- или --> <span data-wenk="Я маленькая!" class="wenk-length--small">Маленькая подсказка!</span> <span data-wenk="Я средняя!" class="wenk-length--large">Средняя подсказка!</span> <span data-wenk="Я большая!" class="wenk-length--large">Большая подсказка!</span> <span data-wenk="Я под ширину текста!" class="wenk-length--fit">Подсказка под ширину текста!</span> |
|
1 2 |
<p><span data-wenk="Прижат к правой стороне!" class="wenk-align--right">Выравнивание в право!</span></p> <p><span data-wenk="По центру!" class="wenk-align--center">Выравнивание по центру!</span></p> |
Возможно вас это заинтересует
