Popover

Popovers are containers used to display transient content such as menus, options, additional actions, and more. They visually stand out through stroke and drop shadow and float on top of the interface.

Property	Values	Default value	Required
width	yes / no	no	no
height	yes / no	no	no
hide tip	yes / no	no
placement	top / top left / top right / top start / top end / bottom / bottom left / bottom right / bottom start / bottom end / left / left top / left bottom / start / start top / start bottom / right / right top / right bottom / end / end top / end bottom	top
offset	yes / no	no	no
cross offset	yes / no	no	no
container padding	yes / no	no	no

{
  "slug": "popover",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/popover.json",
  "title": "Popover",
  "description": "Popovers are containers used to display transient content such as menus, options, additional actions, and more. They visually stand out through stroke and drop shadow and float on top of the interface.",
  "meta": {
    "category": "containers",
    "documentationUrl": "https://spectrum.adobe.com/page/popover/"
  },
  "type": "object",
  "properties": {
    "width": {
      "type": "number"
    },
    "height": {
      "type": "number"
    },
    "hideTip": {
      "type": "boolean",
      "default": false
    },
    "placement": {
      "type": "string",
      "enum": [
        "top",
        "top left",
        "top right",
        "top start",
        "top end",
        "bottom",
        "bottom left",
        "bottom right",
        "bottom start",
        "bottom end",
        "left",
        "left top",
        "left bottom",
        "start",
        "start top",
        "start bottom",
        "right",
        "right top",
        "right bottom",
        "end",
        "end top",
        "end bottom"
      ],
      "default": "top"
    },
    "offset": {
      "type": "number",
      "default": 8,
      "description": "pixel measurement"
    },
    "crossOffset": {
      "type": "number",
      "default": 0
    },
    "containerPadding": {
      "type": "number",
      "default": 8,
      "description": "pixel measurement"
    }
  }
}