mirror of https://github.com/cupcakearmy/svelte-hint.git synced 2024-12-24 08:56:28 +00:00

Svelte library for tooltips

Go to file

dependabot[bot] 7c3b60cef4 Bump vite from 4.0.3 to 4.0.5 Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.0.3 to 4.0.5. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v4.0.5/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v4.0.5/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com>		2023-08-03 05:30:30 +00:00
.github	readme and rearrange directions	2022-01-13 15:00:46 +01:00
src	1.1.0 - Stable svelte & fluent ui	2022-12-26 22:30:19 +01:00
static	initial commit	2022-01-13 13:35:07 +01:00
.gitignore	1.1.0 - Stable svelte & fluent ui	2022-12-26 22:30:19 +01:00
.npmrc	initial commit	2022-01-13 13:35:07 +01:00
package.json	build command	2022-12-26 22:46:34 +01:00
pnpm-lock.yaml	Bump vite from 4.0.3 to 4.0.5	2023-08-03 05:30:30 +00:00
README.md	readme	2022-12-26 22:39:27 +01:00
svelte.config.js	1.1.0 - Stable svelte & fluent ui	2022-12-26 22:30:19 +01:00
tsconfig.json	1.1.0 - Stable svelte & fluent ui	2022-12-26 22:30:19 +01:00
vite.config.js	1.1.0 - Stable svelte & fluent ui	2022-12-26 22:30:19 +01:00

README.md

svelte-hint

Svelte library for tooltips internally powered by the awesome Fluent UI with sensible default values.

Check out the Demo to see it in action.

🌈 Features

Automatic positioning & overflow handling on screen edges (Fluent UI).
Fully typed.
Sensible default values.
Use text or custom html/components as tooltips.

📀 Installation

npm install svelte-hint

⌨️ Usage

With text

<script lang="ts">
  import Hint from 'svelte-hint'
</script>

<Hint text="A tooltip!">
  <button class="btn btn-success drag">Hover me!</button>
</Hint>

With custom html / components

<script lang="ts">
  import Hint from 'svelte-hint'
</script>

<Hint>
  <button class="btn btn-success drag">Hover me!</button>
  <i slot="hint">Some custom html</i>
</Hint>

🗂 Docs

Props

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.
`boundary`	`HTMLElement \| string`	`'clippingAncestors'`	See the Fluent UI docs.
`offset`	`Options`	`4`	See the Fluent UI docs.
`auto`	`boolean \| 'start' \| 'end'`	`false`	Use the `autoPlacement` middleware. If set `placement` will be ignored.

Slots

`hint`

Only works if the text props is empty. Otherwise the slot is ignored.

If you don't want to use the pre-styled tooltip you are free to use whatever html / svelte code you'd like as the tooltip.

<Hint>
  <div>Hover me</div>
  <div slot="hint">Some custom html</div>
</Hint>