Всплывающая подсказка
Контрол, предназначенный для работы с всплывающими подсказками. Контрол содержит основные элементы, необходимые для всплывающей подсказки:
- уголок-указатель на вызывающий элемент, к которому относится подсказка;
- крестик для закрытия окна;
- поле для отображения информации.
В рамках страницы браузера единовременно может быть открыта только одна всплывающая подсказка.
Документация 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>