diff --git a/README.md b/README.md
index a9ddcfc..04749de 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# svelte-hint
-Svelte library for tooltips internally powered by the awesome [Popper.js](https://popper.js.org/) with sensible default values.
+Svelte library for tooltips internally powered by the awesome [Fluent UI](https://floating-ui.com/) with sensible default values.
Check out the **[demo](https://svelte-hint.pages.dev/)** to see it in action.
@@ -50,12 +50,13 @@ npm install svelte-hint
### Props
-| Prop | Type | Default | Description |
-| ----------- | ----------------------- | ------------------- | ----------------------------------------------------------------------------------------------------- |
-| `placement` | `Placement` | `auto` | For possible values see [popper](https://popper.js.org/docs/v2/constructors/#options). |
-| `text` | `string` | `''` | Text to be used as the tooltip. If empty the slot will be used. |
-| `boundary` | `HTMLElement \| string` | `'clippingParents'` | See [popper docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary) for possible values. |
-| `offset` | `number` | `4` | The offset is the distance that the tooltip gets positioned from the trigger. |
+| Prop | Type | Default | Description |
+| ----------- | ----------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------- |
+| `text` | `string` | `''` | Text to be used as the tooltip. If empty the slot will be used. |
+| `placement` | `Placement` | `auto` | See the [Fluent UI docs](https://floating-ui.com/docs/computePosition#placement). |
+| `boundary` | `HTMLElement \| string` | `'clippingParents'` | See the [Fluent UI docs](https://floating-ui.com/docs/detectOverflow#boundary). |
+| `offset` | `Options` | `4` | See the [Fluent UI docs](https://floating-ui.com/docs/offset#options). |
+| `auto` | `boolean \| 'start' \| 'end'` | `false` | Use the [`autoPlacement`](https://floating-ui.com/docs/autoPlacement) middleware. If set `placement` will be ignored. |
### Slots
diff --git a/package.json b/package.json
index 52c3a7d..a71575d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "svelte-hint",
- "version": "1.0.0-rc.1",
+ "version": "1.0.0-rc.2",
"description": "Tooltip library for svelte",
"author": {
"name": "Niccolo Borgioli",
@@ -19,6 +19,7 @@
"publish": "rm -rf ./package && pnpm run check && pnpm run package && pnpm publish ./package"
},
"devDependencies": {
+ "@floating-ui/core": "^0.3.1",
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "next",
"bulma": "^0.9.3",
@@ -31,6 +32,6 @@
"typescript": "^4.5.4"
},
"dependencies": {
- "@popperjs/core": "^2"
+ "@floating-ui/dom": "^0.1.10"
}
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f1cae50..97859cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,7 +1,8 @@
lockfileVersion: 5.3
specifiers:
- '@popperjs/core': ^2
+ '@floating-ui/core': ^0.3.1
+ '@floating-ui/dom': ^0.1.10
'@sveltejs/adapter-auto': next
'@sveltejs/kit': next
bulma: ^0.9.3
@@ -14,11 +15,12 @@ specifiers:
typescript: ^4.5.4
dependencies:
- '@popperjs/core': 2.11.2
+ '@floating-ui/dom': 0.1.10
devDependencies:
+ '@floating-ui/core': 0.3.1
'@sveltejs/adapter-auto': 1.0.0-next.10
- '@sveltejs/kit': 1.0.0-next.228_svelte@3.46.0
+ '@sveltejs/kit': 1.0.0-next.229_svelte@3.46.0
bulma: 0.9.3
interactjs: 1.10.11
svelte: 3.46.0
@@ -30,6 +32,15 @@ devDependencies:
packages:
+ /@floating-ui/core/0.3.1:
+ resolution: {integrity: sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==}
+
+ /@floating-ui/dom/0.1.10:
+ resolution: {integrity: sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==}
+ dependencies:
+ '@floating-ui/core': 0.3.1
+ dev: false
+
/@iarna/toml/2.2.5:
resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
dev: true
@@ -59,10 +70,6 @@ packages:
fastq: 1.13.0
dev: true
- /@popperjs/core/2.11.2:
- resolution: {integrity: sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==}
- dev: false
-
/@rollup/pluginutils/4.1.2:
resolution: {integrity: sha512-ROn4qvkxP9SyPeHaf7uQC/GPFY6L/OWy9+bd9AwcjOAWQwxRscoEyAUD8qCY5o5iL4jqQwoLk2kaTKJPb/HwzQ==}
engines: {node: '>= 8.0.0'}
@@ -99,8 +106,8 @@ packages:
esbuild: 0.13.15
dev: true
- /@sveltejs/kit/1.0.0-next.228_svelte@3.46.0:
- resolution: {integrity: sha512-77e8G7CcmqHhMyAbtjrAWjRDDgFiZArFhujKGql5YM68TWx0cCoipqGdhK0m3EJ/t/NL+T2YuK/9nvtrSNEK6A==}
+ /@sveltejs/kit/1.0.0-next.229_svelte@3.46.0:
+ resolution: {integrity: sha512-i609g5T58Qdgh/qgO1atak70R7woNuJwWp7GtF/YUOZ9csMR9JPUr1tfX9lSh2I4Ez7j+Dc10RLlQ3szVywfXA==}
engines: {node: '>=14.13'}
hasBin: true
peerDependencies:
diff --git a/src/components/Playground.svelte b/src/components/Playground.svelte
index ea441b1..c8839a6 100644
--- a/src/components/Playground.svelte
+++ b/src/components/Playground.svelte
@@ -1,5 +1,5 @@
@@ -74,6 +73,7 @@