Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/svelte-plugins/tooltips
A simple tooltip action and component designed for Svelte.
https://github.com/svelte-plugins/tooltips
action components javascript svelte sveltejs tooltip tooltips
Last synced: 3 days ago
JSON representation
A simple tooltip action and component designed for Svelte.
- Host: GitHub
- URL: https://github.com/svelte-plugins/tooltips
- Owner: svelte-plugins
- License: mit
- Created: 2022-08-22T01:14:25.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-01T09:21:08.000Z (3 months ago)
- Last Synced: 2024-11-11T03:26:36.059Z (3 days ago)
- Topics: action, components, javascript, svelte, sveltejs, tooltip, tooltips
- Language: Svelte
- Homepage: https://svelte-plugins.github.io/tooltips
- Size: 10.1 MB
- Stars: 70
- Watchers: 1
- Forks: 11
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# @svelte-plugins/tooltips
A simple tooltip action and component designed for Svelte.
Try it in the [Svelte REPL](https://svelte.dev/repl/e63e262a91834400aa567b9b0d20675a?version=3.49.0).
## Install
```bash
yarn add @svelte-plugins/tooltips
# or with NPM
npm i @svelte-plugins/tooltips
# or with PNPM
pnpm i @svelte-plugins/tooltips
```
## Using the Tooltip component
```svelte
import { Tooltip } from "@svelte-plugins/tooltips";
Check out my tooltip
```
## Using the Tooltip action
```svelte
import { tooltip } from "@svelte-plugins/tooltips";
Checkout out my tooltip
Checkout out my tooltip
```
## API
### Props
| Prop | Description | Value |
| :----------------- | :------------------------------------------------------------------ | :---------------------------------------------- |
| action | The action that triggers the tooltip (hover | click | prop) | `string` (default: `hover`) |
| animation | The animation to apply to the tooltip | `string` (default: ``) |
| arrow | If `false`, the tooltip arrow will not be shown. | `boolean` (default: `true`) |
| autoPosition | Adjust tooltip position if viewport clipping occurs | `boolean` (default: `false`) |
| content | The string or object containing componentref and props | `string` | `object` component (default: ``) |
| delay | The animation delay in milliseconds to apply to the tooltip | `number` (default: `200`) |
| hideOnClickOutside | Hides a tooltip when an outside click occurs | `boolean` (default: `false`) |
| maxWidth | The max allowable width of the tooltip content | `number` (default: `200`) |
| position | The position where the tooltip should appear relative to its parent | `string` (default: `top`) |
| show | Allows you to manually control the tooltip visibility | `boolean` (default: `false`) |
| style | The object containing theme variable overrides | `object` (default: `null`) |
| theme | The CSS theme class name | `string` (default: ``) |
#### Using components as content
| Prop | Description | Value |
| :-----------------| :------------------------------------------------------------------- | :---------------------------------------------- |
| content.component | Svelte component | `component` (default: `null`) |
| content.props | Any component propeties | `object` (default: `null`) |
```svelte
import ComponentAsTooltip from './ComponentAsTooltip';
Checkout out my tooltip
```
## Theming
You can customize tooltips theme using several methods:
- Assign a theme class name via the `theme` property that includes all of your CSS variables overrides
- Define the overrides directly using the `style` property
- Override the CSS variables globally
Tooltip CSS variables:
```css
--tooltip-arrow-size: 10px;
--tooltip-background-color: rgba(0, 0, 0, 0.9);
--tooltip-border-radius: 4px;
--tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
--tooltip-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
'Helvetica Neue', sans-serif;
--tooltip-font-size: 14px;
--tooltip-font-weight: 500;
--tooltip-line-height: 1.25rem;
--tooltip-color: #fff;
--tooltip-offset-x: 12px;
--tooltip-offset-y: 12px;
--tooltip-padding: 12px;
--tooltip-white-space-hidden: nowrap;
--tooltip-white-space-shown: normal;
--tooltip-z-index: 100;
```
### Using the theme property
```svelte
// action
Hover over me
// component
Hover over me
:global(.tooltip.custom-tooltip) {
--tooltip-background-color: hotpink;
--tooltip-box-shadow: 0 1px 8px pink;
}
```
### Using the style property
```svelte
// action
Hover over me
// component
Hover over me
```
## Changelog
[Changelog](CHANGELOG.md)
## License
[MIT](LICENSE)