# Tooltip + Popover

Contextual help and compact detail overlays.

## Installation

Download: /api/catalog/tooltip-popover/download

Ignition Perspective 8.3. In a development project, choose Designer > File > Import and select the ZIP. Preserve the view and style-class paths. Review resource conflicts before replacing anything.

Append stylesheet-snippet.css to Perspective Styles > stylesheet.css (enable Advanced Stylesheet). Preserve existing CSS. This supporting file is not imported automatically.

Add an Embedded View (ia.display.view), set props.path to Viewcraft/Components/UI/Tooltip/Tooltip, and configure props.params using the contract below. Connect your own data in the host view. The package does not include live tags, page configuration or Gateway settings.

## Parameters

Types are inferred from saved defaults; directions come from native propConfig. These are not full schemas or validated ranges.

| Parameter | Type | Direction | Default |

| --- | --- | --- | --- |

| text | string | input | "Bomba-01 · SP 72.4 %" |

| side | string | input | "top" |

| open | boolean | input | true |

## Embedded View usage

```json

{
  "type": "ia.display.view",
  "props": {
    "path": "Viewcraft/Components/UI/Tooltip/Tooltip",
    "params": {
      "text": "Bomba-01 · SP 72.4 %",
      "side": "top",
      "open": true
    },
    "useDefaultViewWidth": false,
    "useDefaultViewHeight": false
  }
}

```

## Verification

Source and archive hashes are checked. Designer import acceptance has not been completed for this archive; test in your development project before production.

## Files

### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Tooltip/Tooltip/view.json

```json

{
  "custom": {},
  "params": {
    "text": "Bomba-01 · SP 72.4 %",
    "side": "top",
    "open": true
  },
  "propConfig": {
    "params.text": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.side": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.open": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "width": 220,
      "height": 36
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "Tooltip"
    },
    "props": {
      "direction": "row",
      "wrap": "nowrap",
      "alignItems": "center",
      "justify": "flex-start",
      "style": {
        "gap": "0px",
        "minWidth": 0,
        "boxSizing": "border-box",
        "classes": "vc/tooltip vc/tooltip-side-top vc/tooltip-open"
      }
    },
    "position": {
      "grow": 0,
      "shrink": 0,
      "basis": "auto"
    },
    "propConfig": {
      "props.style.classes": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "\"vc/tooltip vc/tooltip-side-\" + if(len(toString({view.params.side}))>0, lower({view.params.side}), \"top\") + if(coalesce({view.params.open}, true), \" vc/tooltip-open\", \" vc/tooltip-closed\")"
          }
        }
      },
      "meta.visible": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "coalesce({view.params.open}, true)"
          }
        }
      }
    },
    "children": [
      {
        "type": "ia.display.label",
        "version": 0,
        "meta": {
          "name": "Text"
        },
        "props": {
          "text": "Bomba-01 · SP 72.4 %",
          "style": {
            "classes": "vc/tooltip-text",
            "padding": "0px",
            "margin": "0px",
            "color": "#fafafa",
            "fontSize": "12px",
            "fontWeight": 500
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "{view.params.text}"
              }
            }
          }
        }
      }
    ]
  }
}


```

### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Tooltip/Tooltip/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "view.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/tooltip/style.json

```json

{
  "base": {
    "style": {
      "display": "inline-flex",
      "alignItems": "center",
      "boxSizing": "border-box",
      "maxWidth": "280px",
      "padding": "6px 10px",
      "backgroundColor": "#171717",
      "borderStyle": "solid",
      "borderWidth": "1px",
      "borderColor": "#3f3f46",
      "borderRadius": "8px",
      "boxShadow": "0 12px 32px rgb(0 0 0 / 0.45)"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/tooltip/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-side-top/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-side-top/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-open/style.json

```json

{
  "base": {
    "style": {
      "opacity": "1",
      "visibility": "visible"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-open/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-closed/style.json

```json

{
  "base": {
    "style": {
      "opacity": "0",
      "visibility": "hidden"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-closed/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-text/style.json

```json

{
  "base": {
    "style": {
      "color": "#fafafa",
      "fontSize": "12px",
      "fontWeight": "500",
      "lineHeight": "16px",
      "padding": "0px",
      "margin": "0px"
    },
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-text/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-side-bottom/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-side-bottom/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-side-left/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-side-left/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-side-right/style.json

```json

{
  "base": {
    "style": {},
    "mediaQueries": []
  },
  "variants": []
}


```

### com.inductiveautomation.perspective/style-classes/vc/tooltip-side-right/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "style.json"
  ]
}

```

### stylesheet-snippet.css

```css


[class~="psc-vc/tooltip"], .psc-vc\/tooltip {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  box-sizing: border-box !important;
  max-width: 280px !important;
  padding: 6px 10px !important;
  background-color: var(--vc-panel, #171717) !important;
  color: var(--vc-foreground, #fafafa) !important;
  border: 1px solid var(--vc-border, #3f3f46) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.45) !important;
  pointer-events: none !important;
  z-index: 40 !important;
  opacity: 1;
  transition: opacity 140ms ease;
}

[class~="psc-vc/tooltip-text"], .psc-vc\/tooltip-text {
  color: var(--vc-foreground, #fafafa) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  padding: 0 !important;
  margin: 0 !important;
}

[class~="psc-vc/tooltip-closed"], .psc-vc\/tooltip-closed {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 120ms ease, visibility 0s linear 120ms;
}

[class~="psc-vc/tooltip-open"], .psc-vc\/tooltip-open {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 140ms ease;
}
[class~="psc-vc/tooltip-side-top"], .psc-vc\/tooltip-side-top { margin-bottom: 0 !important; }
[class~="psc-vc/tooltip-side-bottom"], .psc-vc\/tooltip-side-bottom { margin-top: 0 !important; }
[class~="psc-vc/tooltip-side-left"], .psc-vc\/tooltip-side-left { margin-right: 0 !important; }
[class~="psc-vc/tooltip-side-right"], .psc-vc\/tooltip-side-right { margin-left: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  [class~="psc-vc/tooltip"], .psc-vc\/tooltip, [class~="psc-vc/tooltip-open"], .psc-vc\/tooltip-open, [class~="psc-vc/tooltip-closed"], .psc-vc\/tooltip-closed {
    transition: none !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
}

```