Skip to content

Commit ad9ff31

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #769 from thejackshelton/tooltip-refactor
Tooltip refactor
2 parents decebf8 + e2ec0e8 commit ad9ff31

File tree

13 files changed

+174
-22
lines changed

13 files changed

+174
-22
lines changed

‎.changeset/fast-actors-report.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
'@qwik-ui/headless': minor
33
---
44

5+
## 100% Lazy execution
6+
7+
The entire Qwik UI library does not execute code until interaction. Your components are HTML, until the user decides to interact with them.
8+
59
## Bundling improvements
610

711
We have reduced the bundle size significantly of the headless library. If you are a Qwik library author, please refer to [this issue](https://github.com/QwikDev/qwik/issues/5473) as it may impact your bundle size as well.

‎.changeset/two-glasses-fix.md

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,18 @@
22
'@qwik-ui/headless': minor
33
---
44

5+
### Tooltip
6+
7+
The Tooltip component has been refactored from the ground up to be more accessible and performant.
8+
9+
It is now built on top of the popover primitive, and has a similar API.
10+
11+
It remains in `draft` status, and is not yet ready for production use. We will be working on it more deeply in the near future.
12+
513
### Accordion
614

715
The Accordion has been refactored from the ground up to be more accessible and performant.
816

9-
The entire Qwik UI library now does not execute code until interaction.
10-
1117
#### Accordion.Root
1218

1319
- The `behavior="multi"` prop has been deprecated with `multiple` on the `<Accordion.Root />` component.
@@ -47,7 +53,6 @@ In 0.4, we have deprecated the following headless components:
4753
- Action Button
4854
- Button Group
4955
- Toast
50-
- Tooltip
5156
- Card
5257
- Badge
5358
- Spinner

‎apps/website/src/_state/component-statuses.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,5 +46,6 @@ export const statusByComponent: ComponentKitsStatuses = {
4646
Select: ComponentStatus.Beta,
4747
Separator: ComponentStatus.Beta,
4848
Tabs: ComponentStatus.Beta,
49+
Tooltip: ComponentStatus.Draft,
4950
},
5051
};

‎apps/website/src/routes/docs/headless/menu.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@
2626
- [Select](/docs/headless/select)
2727
- [Separator](/docs/headless/separator)
2828
- [Tabs](/docs/headless/tabs)
29+
- [Tooltip](/docs/headless/tooltip)

‎apps/website/src/routes/docs/headless/popover/index.mdx

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ To read more about the popover API you can check it out on:
431431
},
432432
{
433433
name: 'floating',
434-
type: 'boolean',
434+
type: 'boolean | TPlacement',
435435
description: 'Enables extra JavaScript behavior for floating elements.',
436436
},
437437
{
@@ -450,24 +450,6 @@ To read more about the popover API you can check it out on:
450450
type: 'number',
451451
description: 'The space between the floating element and the anchored element.',
452452
},
453-
{
454-
name: 'placement',
455-
type: 'union',
456-
info: ` | 'top'
457-
| 'top-start'
458-
| 'top-end'
459-
| 'right'
460-
| 'right-start'
461-
| 'right-end'
462-
| 'bottom'
463-
| 'bottom-start'
464-
| 'bottom-end'
465-
| 'left'
466-
| 'left-start'
467-
| 'left-end';`,
468-
description:
469-
'Flips the placement of the popover when it starts to collide with the boundaries.',
470-
},
471453
{
472454
name: '[popover]',
473455
type: 'selector',

‎apps/website/src/routes/docs/headless/tooltip/examples/hero.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import { Tooltip } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
useStyles$(styles);
6+
7+
return (
8+
<Tooltip.Root>
9+
<Tooltip.Trigger class="tooltip-trigger">Hover over me</Tooltip.Trigger>
10+
<Tooltip.Content class="tooltip-content">I'm a tooltip!</Tooltip.Content>
11+
</Tooltip.Root>
12+
);
13+
});
14+
15+
// internal
16+
import styles from '../snippets/tooltip.css?inline';

‎apps/website/src/routes/docs/headless/tooltip/index.mdx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
title: Qwik UI | Tooltip
3+
---
4+
5+
# Tooltip
6+
7+
A popup that shows information when an element is focused or hovered over.
8+
9+
<Showcase name="hero" />
10+
11+
## ✨ Features
12+
13+
<FeatureList
14+
features={[
15+
'Above the rest of the page',
16+
'Hover and non-hover behavior',
17+
'Close with escape',
18+
]}
19+
/>
20+
21+
## Building blocks
22+
23+
```tsx
24+
import { component$ } from '@builder.io/qwik';
25+
import { Tooltip } from '@qwik-ui/headless';
26+
27+
export default component$(() => {
28+
return (
29+
<Tooltip.Root>
30+
<Tooltip.Trigger>Trigger</Tooltip.Trigger>
31+
<Tooltip.Panel>Panel</Tooltip.Panel>
32+
</Tooltip.Root>
33+
);
34+
});
35+
```
36+
37+
### 🎨 Anatomy
38+
39+
<AnatomyTable
40+
propDescriptors={[
41+
{
42+
name: 'Tooltip.Root',
43+
description: 'The parent container for the tooltip trigger and panel.',
44+
},
45+
{
46+
name: 'Tooltip.Trigger',
47+
description: 'A button that opens the tooltip when interacted with.',
48+
},
49+
{
50+
name: 'Tooltip.Panel',
51+
description: `An HTML Element that is above other content on the page.`,
52+
},
53+
]}
54+
/>
55+
56+
## API
57+
58+
### Tooltip Root
59+
60+
<APITable
61+
propDescriptors={[
62+
{
63+
name: 'hover',
64+
type: 'boolean',
65+
description: 'Disables hover behavior.',
66+
},
67+
{
68+
name: 'flip',
69+
type: 'boolean',
70+
description:
71+
'Flips the placement of the tooltip when it starts to collide with the boundaries.',
72+
},
73+
{
74+
name: 'gutter',
75+
type: 'number',
76+
description: 'The space between the floating element and the anchored element.',
77+
},
78+
{
79+
name: 'floating',
80+
type: 'string',
81+
description: 'The floating position of the tooltip.',
82+
},
83+
]}
84+
/>

‎apps/website/src/routes/docs/headless/tooltip/snippets/tooltip.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.tooltip-trigger {
2+
border-radius: var(--border-radius);
3+
border: 2px dotted hsla(var(--foreground));
4+
background-color: hsl(var(--background));
5+
color: hsl(var(--foreground));
6+
padding: 0.5rem;
7+
margin-bottom: 0.5rem;
8+
}
9+
10+
.tooltip-trigger:hover {
11+
background-color: hsla(var(--primary) / 0.08);
12+
}
13+
14+
.tooltip-content {
15+
border-radius: var(--border-radius);
16+
border: 2px dotted hsla(var(--primary));
17+
background: hsla(var(--tooltip));
18+
color: hsl(var(--foreground));
19+
padding: 0.5rem;
20+
box-shadow:
21+
0 4px 6px -1px rgba(0, 0, 0, 0.1),
22+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
23+
}

‎packages/kit-headless/src/components/tooltip/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { HTooltipRoot as Root } from './tooltip-root';
2+
export { HTooltipContent as Content } from './tooltip-content';
3+
export { HTooltipTrigger as Trigger } from './tooltip-trigger';

‎packages/kit-headless/src/components/tooltip/tooltip-content.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { PropsOf, Slot, component$ } from '@builder.io/qwik';
2+
import { HPopoverPanel } from '../popover/popover-panel';
3+
4+
export const HTooltipContent = component$((props: PropsOf<typeof HPopoverPanel>) => {
5+
return (
6+
<HPopoverPanel {...props}>
7+
<Slot />
8+
</HPopoverPanel>
9+
);
10+
});

0 commit comments

Comments
 (0)