Як швидко зробити спливаючі підказки.

Всім привіт! Напевно ви чули таке слово як tooltip. Це підказка. Сьогодні ми поговоримо про один сервіс, який дозволяє підключити такі підказки за секунди.

Посилання: https://darsa.in/tooltip/

На сайті ви відразу можете подивитися, як це працює, поміняти різні настройки.

Якщо ви вирішили встановити їх собі, то перейдіть до пункту download і скачайте все необхідне.

Відео: Підказки на CSS

Всі подальші інструкції написані на сайті.

При використанні як компонент:

varTooltip=require(`Tooltip`) -

Створіть простий текстовий tooltip, помістіть його де-небудь на сторінці і покажіть:

var tip =newTooltip(`Foo bar!`) - 
tip.position(200,200).show() -

Використання картинки в контенті:

Відео: Підказки за допомогою CSS

var img = document.createElement(`Img`) - 
img.src =`Http://foo.com/bar.jpg`- 
img.width =`64`- 
img.height =`64`- 
tip.content(img) -

Позиція підказки поки елемент є метою:

tip.position(document.querySelector(`.target`)) -

Зміна типу підказки та ефекту:

tip.type(`Error`).effect(`Fade`) -

Почитати докладніше ви можете тут: https://github.com/darsain/tooltip/wiki/Tooltip

Отже, ось такий простий сервіс, який, проте, дозволяє дуже швидко зробити красиві спливаючі підказки.

Поділися в соціальних мережах:

Схожі