Enable multi-stage tooltip

As a user
When I hover my mouse over a thing for an extended period of time
I see even more information about it
so I can learn what I need to without leaving what I'm working on

---

_Possibility 1: A higher-level API that takes content for each of the three sizes and shows them when appropriate_
```jsx
function MySpecialTooltip() {
return (
}
mediumContent={}
largeContent={}
>


);
}
```

_Possibility 2: A lower level API that tells you when hover thresholds have passed, you then pass appropriate content_
```jsx
class MySpecialToolip extends Component {
state = {
content: 'small'
}

renderTooltipContent() {
if (this.state.content === 'small') {
return
}
if (this.state.content === 'medium') {
return
}
return
}

render(){
return (
(this.setState({ content: 'small' })) }
onMediumHoverElapsed={() => (this.setState({ content: 'medium' })) }
onLongHoverElapsed={() => (this.setState({ content: 'large' })) }
content={this.renderTooltipContent}
>


);
}
}
```

Start by locating the Tooltip component and its hover behavior entry points. The issue presents two alternative API designs but does not choose timing thresholds or a final interaction contract; clarify those decisions before determining implementation scope and acceptance criteria.

Written by the indexing model from the issue text.