Подсвечивающиеся блоки

Иногда есть необходимость выделить конкретные участки сайта, для привлечения к ним пользовательского внимания.

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

Для наглядности, мы добавили несколько блоков ниже. По нажатию на кнопки, они будут выделяться

Пример

Для подсвечивания нужного блока, добавьте ему триггер, например, атрибут id и выводимый в подсказке текст в атрибут data-poplight-message.

В качестве элемента, который будет вызывать подсветку, используйте атрибут data-poplight, где в качестве значения будет триггер(в примере ранее - это id).

Если указать в атрибуте data-poplight-message другой элемент (id,класс,атрибут), то будет вызван другой блок, который вы можете добавить самостоятельно с классом .poplight-message

Влиять на поведение подсветки можно и с помощью javascript. Для этого в компоненте подготовлен объект pipui.poplight