Callout

A callout is an anchored tip that can be used to teach people or guide them through the app without blocking them.

Callout can be "attached" to the following controls:

  • Button
  • MenuItem (Button and Toolbar)
  • Checkbox
  • Dropdown
  • Link
  • Slider
  • SearchBox
  • ChoiceGroup
  • SpinButton
  • Textbox
  • Toogle

Properties#

NameTypeDefaultDescription
targetstringId of the control to which the collout is attached.
positionstringbottomAutoThe position of the callout relative to the target control: topLeft, topCenter, topRight, topAuto, bottomLeft, bottomCenter, bottomRight, bottomAuto (default), leftTop, leftCenter, leftBottom, rightTop, rightCenter, rightBottom.
gapnumber0The gap between the callout and the target control.
beakbooltrueWhether the beak is visible.
beakWidthnumber16Beak width.
pagePaddingnumber8The minimum distance the callout will be away from the edge of the screen.
focusboolfalseIf true then the callout will attempt to focus the first focusable element that it contains. If it doesn't find an element, no focus will be set and the method will return false. This means that it's the contents responsibility to either set focus or have focusable items.
coverboolfalseIf true the position returned will have the menu element cover the target. If false then it will position next to the target.
visibleboolfalseWhether the callout is visible or not.

Events#

NameDescription
dismissFires when the callout is dismissed. Callout is dismissed when a user clicks outside of the callout area.

Child controls#

  • Any control - will be rendered in the body of the callout.

Examples#

# TODO