Skip to content

Commit dd22ec2

Browse files
cwoolumcwoolum
committed
feat(tooltip): implement tooltip to beta phase
1 parent 79d3b31 commit dd22ec2

30 files changed

+1184
-60
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ npm install -D @qwik-ui/headless
5656
| [Separator](https://qwikui.com/docs/headless/separator) | | | ✅ | |
5757
| [Tabs](https://qwikui.com/docs/headless/tabs) | | | ✅ | |
5858
| [Toggle](https://qwikui.com/docs/headless/toggle) | ✅ | | | |
59-
| [Tooltip](https://qwikui.com/docs/headless/tooltip) | | ✅ | | |
59+
| [Tooltip](https://qwikui.com/docs/headless/tooltip) | | | ✅ | |
6060

6161
## Contributing
6262

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,6 @@ export const statusByComponent: ComponentKitsStatuses = {
4848
Select: ComponentStatus.Beta,
4949
Separator: ComponentStatus.Beta,
5050
Tabs: ComponentStatus.Beta,
51-
Tooltip: ComponentStatus.Draft,
51+
Tooltip: ComponentStatus.Beta,
5252
},
5353
};

‎apps/website/src/components/showcase/showcase.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,18 @@ export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
1919
const componentCodeSig = useSignal<string>();
2020

2121
useTask$(async () => {
22-
// eslint-disable-next-line qwik/valid-lexical-scope
23-
MetaGlobComponentSig.value = isDev
24-
? await metaGlobComponents[componentPath]() // We need to call `await metaGlobComponents[componentPath]()` in development as it is `eager:false`
25-
: metaGlobComponents[componentPath]; // We need to directly access the `metaGlobComponents[componentPath]` expression in preview/production as it is `eager:true`
26-
componentCodeSig.value = isDev
27-
? await rawComponents[componentPath]()
28-
: rawComponents[componentPath];
22+
try {
23+
// eslint-disable-next-line qwik/valid-lexical-scope
24+
MetaGlobComponentSig.value = isDev
25+
? await metaGlobComponents[componentPath]() // We need to call `await metaGlobComponents[componentPath]()` in development as it is `eager:false`
26+
: metaGlobComponents[componentPath]; // We need to directly access the `metaGlobComponents[componentPath]` expression in preview/production as it is `eager:true`
27+
componentCodeSig.value = isDev
28+
? await rawComponents[componentPath]()
29+
: rawComponents[componentPath];
30+
} catch (e) {
31+
console.error('Unable to load path %s', componentPath, e);
32+
throw e;
33+
}
2934
});
3035

3136
return (

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Tooltip } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
return (
6+
<Tooltip.Root gutter={4} flip>
7+
<Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
8+
<Tooltip.Panel class="tooltip-animation">
9+
Animated tooltip content here
10+
</Tooltip.Panel>
11+
</Tooltip.Root>
12+
);
13+
});

‎apps/website/src/routes/docs/headless/tooltip/examples/arrow-styling.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import { Tooltip } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
useStyles$(`
6+
.tooltip-panel {
7+
background-color: #222;
8+
color: #fff;
9+
padding: 15px;
10+
border-radius: 8px;
11+
position: relative;
12+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
13+
transition: opacity 0.3s ease;
14+
opacity: 0;
15+
}
16+
17+
.tooltip-panel[data-state="open"] {
18+
opacity: 1;
19+
}
20+
21+
.tooltip-arrow {
22+
position: absolute;
23+
width: 20px;
24+
height: 10px;
25+
overflow: hidden;
26+
}
27+
28+
.tooltip-arrow::before {
29+
content: '';
30+
position: absolute;
31+
width: 10px;
32+
height: 10px;
33+
background-color: #222;
34+
top: -5px;
35+
left: calc(50% - 5px);
36+
transform: rotate(45deg);
37+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
38+
transition: top 0.3s ease;
39+
}
40+
41+
.tooltip-panel[data-state="open"] .tooltip-arrow::before {
42+
top: -8px;
43+
}
44+
`);
45+
46+
return (
47+
<Tooltip.Root gutter={4} flip>
48+
<Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
49+
<Tooltip.Panel aria-label="Tooltip content" class="tooltip-panel">
50+
<Tooltip.Arrow class="tooltip-arrow" width={20} height={10} />
51+
<div>
52+
<h3 style="margin: 0 0 10px;">Tooltip Title</h3>
53+
<p style="margin: 0;">This tooltip has a snazzy styled arrow!</p>
54+
</div>
55+
</Tooltip.Panel>
56+
</Tooltip.Root>
57+
);
58+
});

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Tooltip } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
return (
6+
<Tooltip.Root gutter={4} flip>
7+
<Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
8+
<Tooltip.Panel class="tooltip-panel">Tooltip content here</Tooltip.Panel>
9+
</Tooltip.Root>
10+
);
11+
});

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Tooltip } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
return (
6+
<Tooltip.Root gutter={4} flip>
7+
<Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
8+
<Tooltip.Panel aria-label="Tooltip content">
9+
<Tooltip.Arrow width={10} height={5} />
10+
Tooltip content here
11+
</Tooltip.Panel>
12+
</Tooltip.Root>
13+
);
14+
});

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Tooltip } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
return (
6+
<Tooltip.Root gutter={4} flip placement="bottom">
7+
<Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
8+
<Tooltip.Panel aria-label="Complex Tooltip content">
9+
<Tooltip.Arrow width={10} height={5} />
10+
<div>
11+
<h3>Tooltip Title</h3>
12+
<p>This is a tooltip with complex HTML content, including:</p>
13+
<ul>
14+
<li>List item 1</li>
15+
<li>List item 2</li>
16+
<li>List item 3</li>
17+
</ul>
18+
</div>
19+
</Tooltip.Panel>
20+
</Tooltip.Root>
21+
);
22+
});

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Tooltip } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
return (
6+
<Tooltip.Root gutter={4} flip>
7+
<Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
8+
<Tooltip.Panel class="tooltip-panel">
9+
Tooltip content with flip enabled
10+
</Tooltip.Panel>
11+
</Tooltip.Root>
12+
);
13+
});

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Tooltip } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
return (
6+
<Tooltip.Root gutter={4} flip>
7+
<Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
8+
<Tooltip.Panel class="tooltip-panel">Floating Tooltip content here</Tooltip.Panel>
9+
</Tooltip.Root>
10+
);
11+
});

0 commit comments

Comments
 (0)