# contributionGraphKeys

> Why JS: one shared tooltip that follows the hovered or focused day, and arrow keys that move one roving Tab stop through a contribution graph, both need listeners.

```ts
import { contributionGraphKeys } from "@sdxc/ui/app";
```

Runs a contribution graph from the island inside it: the host is the graph's shared tooltip
(a manual popover), which shows the hovered or focused day's label anchored to that day, and
the arrows, Home and End walk the days with a roving Tab stop. Each day's `title` is removed
once this runs, so the browser's own tooltip never doubles the shared one.

## Signature

```ts
contributionGraphKeys(anchor: string): MixinDescriptor<HTMLElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `anchor` | `string` | The CSS anchor name the tooltip positions against, unique to the graph. |

## Examples

```tsx
<div popover="manual" mix={[contributionGraphKeys("--ui-contribution-graph-r1")]} />
```