cupcakearmy/svelte-hint
1
0
Fork 0
mirror of https://github.com/cupcakearmy/svelte-hint.git synced 2024-12-23 16:36:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Svelte library for tooltips
17 Commits 4 Branches 0 Tags 138 KiB
Svelte 79.6%
HTML 12.6%
JavaScript 7.1%
TypeScript 0.7%
084dfb565f
Go to file
dependabot[bot] 084dfb565f
Bump postcss from 8.4.20 to 8.4.31 
Bumps [postcss](https://github.com/postcss/postcss) from 8.4.20 to 8.4.31.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/postcss/postcss/compare/8.4.20...8.4.31)

---
updated-dependencies:
- dependency-name: postcss
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
2023-10-07 11:35:18 +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 postcss from 8.4.20 to 8.4.31 2023-10-07 11:35:18 +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.

Screenshot

version badge downloads badge dependency count minzip size badge types badge

🌈 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>