Skip to content

Commit 8159907

Browse files
authored
Feat: useHover hook (#34)
* Renamed mouse to hover * Tooltip ish working * Started with restTimeout * Added tooltip! * svelte transition :D * Implemented `restMs` * Removed unused import * cleanup * Implemented `move` * Renamed props * Better tooltip defaults * Init timeout class field * Properly cleanup timeouts * Added interaction interface * Removed example page * format * interactions stuff * Started conversion to react * Implemented 2 effects * Progress * progress * Fixed some conflicts * Remove useInteractions hook (handled by Add: useInteractions hook #3) * Added `useHover` hook * Simplified with $derived * formatting * more tests * Added docs * Resolve pnpm-lock * Moved everything to attributes * Renamed to `elementProps` * Started testing * Started porting tests! * Added more tests * Added more tests * Removed redundant import * Remove space * Feedback * Added changeset
1 parent 5cd74c9 commit 8159907

File tree

12 files changed

+4404
-3027
lines changed

12 files changed

+4404
-3027
lines changed

.changeset/curvy-snakes-tickle.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@skeletonlabs/floating-ui-svelte": minor
3+
---
4+
5+
Added the `useHover` hook

README.md

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,13 +121,37 @@ This will ensure all event handlers will be registered rather being overruled by
121121

122122
| Property | Description | Type |
123123
| -------- | ----------- | ---- |
124-
| getReferenceProps | The merged attributes for the `reference` element | (userProps?: HTMLAttributes<Element>) => Record<string, unknown> |
125-
| getFloatingProps | The merged attributes for the `floating` element | (userProps?: HTMLAttributes<Element>) => Record<string, unknown> |
126-
| getItemProps | The merged attributes for when dealing with a list inside the `floating` element. | (userProps?: HTMLAttributes<Element> & ExtendedUserProps) => Record<string, unknown> |
124+
| getReferenceProps | The merged attributes for the `reference` element. | (userProps?: HTMLAttributes<Element>) => Record<string, unknown> |
125+
| getFloatingProps | The merged attributes for the `floating` element. | (userProps?: HTMLAttributes<Element>) => Record<string, unknown> |
126+
| getItemProps | The merged attributes for when dealing with a list inside the `floating` element. | (userProps?: HTMLAttributes<Element> & ExtendedUserProps) => Record<string, unknown> |
127127

128128
### useHover
129129

130-
(tbd)
130+
#### Usage
131+
132+
```html
133+
<script>
134+
import { useFloating, useInteractions, useHover } from '@skeletonlabs/floating-ui-svelte';
135+
136+
const floating = useFloating();
137+
const hover = useHover(floating.context);
138+
const interactions = useInteractions([hover]);
139+
</script>
140+
141+
<button {...interactions.getReferenceProps()}>Reference</button>
142+
<div {...interactions.getFloatingProps()}>Tooltip</div>
143+
```
144+
145+
#### Options
146+
147+
| Property | Description | Type | Default Value |
148+
| -------- | ----------- | ---- | ------------- |
149+
| enabled | Enables the hook. | boolean | true |
150+
| mouseOnly | Only allow pointers of type mouse to trigger the hover (thus excluding pens and touchscreens). | boolean | false |
151+
| delay | Time in ms that will delay the change of the open state. Also accepts an object with open and close properties for finer grained control. | number | 0 |
152+
| restMs | Time in ms that the pointer must rest on the reference element before the open state is set to true. | number | 0 |
153+
| move | Whether moving the pointer over the floating element will open it, without a regular hover event required. | boolean | true |
154+
| handleClose | Callback to handle the closing of the floating element. | HandleCloseFn | null |
131155

132156
### useFocus
133157

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
"!dist/**/*.spec.*"
2929
],
3030
"dependencies": {
31-
"@floating-ui/dom": "^1.6.3"
31+
"@floating-ui/dom": "^1.6.3",
32+
"@floating-ui/utils": "^0.2.2"
3233
},
3334
"peerDependencies": {
3435
"svelte": "^5.0.0-next.1"

0 commit comments

Comments
 (0)