# xpl-tooltip

Tooltips are intended to be short one to two sentence messages adding contextual information for the user. Keep messages short and to the point. Tooltips are static and do not contain actions, and only appear when the context is hovered.

Tooltip variants control one of 8 arrow positions indicating the direction the tooltip will appear in relation to it's trigger:
"bottom-left" | "bottom-middle" | "bottom-right" | "left" | "right" | "top-left" | "top-middle" | "top-right"


### Design Tokens

Tokens used by this component from `@xplortech/apollo-foundation`.

**Color**
- `--xpl-background-surface-default` — tooltip background and arrow fill
- `--xpl-background-surface-transparent-10` — shadow primary layer
- `--xpl-background-surface-transparent-5` — shadow secondary layer
- `--xpl-text-default` — tooltip text color
- `--xpl-border-default` — tooltip border and arrow stroke (keeps the arrow edge theme-aware in dark mode)

**Spacing**
- `--xpl-space-6` — vertical padding
- `--xpl-space-8` — horizontal padding
- `--xpl-space-12` — offset from trigger, via `--xpl-tooltip-margin`

**Typography**
- `.xpl-text-callout` — text style (via `@extend`)

**Border**
- `--xpl-border-small` — border width (1px)
- `--xpl-border-radius-small` — corner radius (4px)

**Z-index**
- `--xpl-z-index-900` — tooltip stacking order
- `--xpl-z-index-100` — arrow base stacking order (elevated to `--xpl-z-index-900` per position variant)

<!-- Auto Generated Below -->


## Properties

| Property    | Attribute    | Description                                     | Type                                                                                                                   | Default        |
| ----------- | ------------ | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------- |
| `hideArrow` | `hide-arrow` | Hide the arrow                                  | `boolean`                                                                                                              | `false`        |
| `position`  | `position`   | Position of the tooltip relative to the element | `"bottom-left" \| "bottom-middle" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-middle" \| "top-right"` | `'top-middle'` |
| `text`      | `text`       | The tooltip text to display                     | `string`                                                                                                               | `undefined`    |


## Dependencies

### Used by

 - [xpl-data-card](../xpl-data-card)

### Graph
```mermaid
graph TD;
  xpl-data-card --> xpl-tooltip
  style xpl-tooltip fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*