Окно-превьюер

Контрол, отображающий всплывающее окно-превьювер, относительно указанного элемента. Окно открывается автоматически по событию указанному в опции trigger. В один момент времени на странице может отображаться только одно окно-превьювер.

Документация API

Базовая конфигурация контрола

Для базовой настройки необходимо задать две опции: content — область при взаимодействии с которой должно открываться окно и template — содержимое окна.

Можно задать событие, которое запускает открытие окна-превьюера в опции trigger. Значение по умолчанию hoverAndClick.

Возможные значения опции: trigger

hover — окно-превьюер появляется при наведении на контент.
click — окно-превьюер появляется при клике на контент.
hoverAndClick — окно-превьюер появляется при наведении на контент или клике по нему.
demand — прикладное событие вызова окна-превьюера.

<!-- WML -->
<Controls.popup:PreviewerTarget
   trigger="hover"
   template="wml!file2"
   templateOptions="{{_templateOptions}}">
   <ws:content>
      <div>
         Для появления подсказки наведите на контент курсор мыши
      </div>
   </ws:content>
</Controls.popup:PreviewerTarget>

<!-- file2.wml -->
<div>
   <img scr='{{image}}'/>
   {{name}}
</div>

// TypeScript
class Test extends Control<IControlOptions> {
    protected templateOptions = {
        image: '/myPhoto.png'
        name: 'Иван Иванов'
    }
}

О реализации раскладок окон подробнее читайте здесь.