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

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

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

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

{% embed url="<https://codepen.io/pipui/pen/yLqgXNp>" %}
Пример
{% endembed %}

Для подсвечивания нужного блока, добавьте ему триггер, например, атрибут <mark style="color:orange;">`id`</mark> и выводимый в подсказке текст в атрибут <mark style="color:orange;">`data-poplight-message`</mark>.

В качестве элемента, который будет вызывать подсветку, используйте атрибут\ <mark style="color:orange;">`data-poplight`</mark>, где в качестве значения будет триггер(в примере ранее - это id).

*Если указать в атрибуте data-poplight-message другой элемент (id,класс,атрибут), то будет вызван другой блок, который вы можете добавить самостоятельно с классом*\ <mark style="color:orange;">`.poplight-message`</mark>

Влиять на поведение подсветки можно и с помощью javascript. Для этого в компоненте подготовлен объект <mark style="color:orange;">`pipui.poplight`</mark>