Всплывающая подсказка

Контрол, предназначенный для работы с всплывающими подсказками. Контрол содержит основные элементы, необходимые для всплывающей подсказки:

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

В рамках страницы браузера единовременно может быть открыта только одна всплывающая подсказка.

Документация API Спецификация Axure

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

В следующем примере в WML-шаблон добавлен Controls/popup:InfoboxTarget. Всплывающая подсказка будет открываться при наведении курсора мыши.

<!-- WML -->
<Controls.popup:InfoboxTarget
    name="infobox"
    trigger="hover" 
    showDelay="{{5000}}">
    <ws:content>
        <div>Для появления подсказки на блок наведите курсор мыши.</div>
    </ws:content>
    <ws:template>
        <div>Это всплывающая подсказка.</div>
    </ws:template>
</Controls.popup:InfoboxTarget>

В следующем примере использование Controls/popup:InfoboxTarget не обязательно — открыть и закрыть всплывающую подсказку можно через события openInfoBox и closeInfoBox соответственно.

// TypeScript
// Откроем всплывающее окно с помощью события openInfoBox.
this._notify('openInfoBox', [config], {bubbling: true});
 
// Закроем всплывающее окно с помощью события closeInfoBox.
this._notify('closeInfoBox', [], {bubbling: true});

Если всплывающая подсказка открывается с помощью события openInfoBox, то закрывать её следует с помощью closeInfoBox. В следующем примере показано, что для поля ввода создан обработчик клика, через который открывается всплывающая подсказка. Конфигурация всплывающей подсказки передана с помощью параметра config. В конфигурации подсказки в свойство target следует передавать контейнер, который оборачивает контрол.

<!-- WML -->
<div name="target">
   <Controls.input:Text
      name="textBox"
      placeholder="введите текст"
      bind:value="myInputValue"
      tagStyle="info"
      maxLength="{{ 100 }}"
      on:click="_openInfo()" />
</div>

// TypeScript
protected _openInfo(): void {
   this._notify(
      'openInfoBox',
      [{
         target: this._children.target,
         showDelay: 300,
         message: "Вы кликнули на поле ввода!"
      }],
      {bubbling: true}
   );
},

Размер окна

Размер окна всплывающей подсказки определяется автоматически по размеру вставленного контента.

Как добавить пользовательский CSS-класс на контейнер контрола

Контрол Controls/popup:InfoboxTarget не поддерживает эту возможность.

Как создать окно с уголком-указателем на вызывающий элемент

Проблема

Нужно создать окно с уголком-указателем на вызывающий элемент. При этом логика работы контрола Controls/popup:InfoboxTarget не подходит для прикладной задачи.

Решение

В качестве открывающего контрола используйте Controls/popup:Sticky;
Настройте шаблон всплывающего окна на основе Controls/popupTemplate:InfoBox.

Как сообщение инфобокса сделать многострочным

В опцию template передайте пользовательский шаблон с соответствующей версткой.

<!-- WML -->
<Controls.popup:InfoboxTarget
   name="infobox"
   trigger="click"
   showDelay="{{5000}}">
   <ws:content>
      <div>Для появления подсказки на блок наведите курсор мыши.</div>
   </ws:content>
   <ws:template>
      <div>
         <p>Это всплывающая подсказка, которая</p>
         <p>выводится в несколько строк</p>
      </div>
   </ws:template>
</Controls.popup:InfoboxTarget>