---
title: "ZingGrid Web Component: `<zg-tooltip>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-tooltip>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/api/tags/zg-tooltip
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-tooltip.md
mode: provenance
representation: markdown
origin_response_id: 11baac40102567385a4c09bdf0e5aab5
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.655Z
version_nonce: 1f461ea919722bdc6c25abac8377c52d
generated_at_utc: 2026-10-27T07:05:35.575Z
response_nonce: 8d7da7a07506cd5f91c5ea0d5c2ca812
```

# `<zg-tooltip>`

The `<zg-tooltip>` tag is a web component that serves as a container the the grid's tooltip and used as a CSS target for styling by the developer.. **The `<zg-tooltip>` web component should not be accessed specifically beyond styling.**

![Image of the DOM relationship for the zg-tooltip web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-tooltip-web-component-dom.png "Image of the DOM relationship for the zg-tooltip web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated | n/a |

#### Related Web Components

- [`<zg-cell>`](https://www.zinggrid.com/docs/api/tags/zg-cell)
- [`<zg-head-cell>`](https://www.zinggrid.com/docs/api/tags/zg-head-cell)
- [`<zing-grid>`](https://www.zinggrid.com/docs/api/tags/zing-grid)

## Usage

The `<zg-tooltip>` element is a generated element added to `<zing-grid>` when the `cell-tooltip-text` or `header-tooltip-text` attribute is defined.

```html
<zing-grid src="...">
  <zg-colgroup>
    <zg-column header-tooltip-text="I'm a tooltip"></zg-column>
    ...
  <zg-colgroup>
</zing-grid>
```

## Attributes

There are no attributes available for the `<zg-tooltip>` web component.

## CSS Variables
There are no CSS variables available for the `<zg-tooltip>` web component.

## CSS Selector

`<zg-tooltip>` can be styled by common CSS selectors, like so:

```css
zg-tooltip {
  background: red;
}
```

## CSS Shadow Parts

`<zg-tooltip>` exposed elements within the shadow can be styled by CSS shadow parts, like so:

```css
zg-tooltip::part(tooltip) {
  background-color: red;
}
```

Below is a list of all the associated ZGTooltip shadow parts. Check out the [full list of CSS shadow parts](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Description |
| --- | --- |
| `close` | The tooltip close icon |

## Slots

There are no slots available for the `<zg-tooltip>` web component.